CSSを使用したセンタリングボタン

これらのボタンを中央に配置しようとしていますが、オンラインのものはほとんど機能しません。 <center>が機能せず、text-align:centerが機能しません。CSSを使用したセンタリングボタン

ボタンは真ん中を中心にしていますが、まったく同じ方法で表示されます。これを試しても動作しません。問題があるはずです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>website</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
}); 
</script> 
<style type="text/css"> 
.button0 { 
position:fixed; 
left:88px; 
top:58px; 
font-family:MS Shell Dlg 2; 
font-size:8px; 
font-weight:NORMAL; 
} 
.button1 { 
position:fixed; 
left:6px; 
top:191px; 
font-family:MS Shell Dlg 2; 
font-size:8px; 
font-weight:NORMAL; 
text-align: center; 
margin-left:auto; 
margin-right:auto; 
} 
.button2 { 
position:fixed; 
left:358px; 
top:216px; 
font-family:MS Shell Dlg 2; 
font-size:8px; 
font-weight:NORMAL; 
} 
</style> 
<body> 
<center> 
<div class="button0"><input type="button" style="width: 268px;height: 145px;" value="Button"/></div> 
<div class="button1"><input type="button" style="width: 40px;height: 88px;" value="Button"/></div> 
<div class="button2"><input type="button" style="width: 76px;height: 73px;" value="Button"/></div> 
</center> 
</body> 
</html>

出典

2012-01-31 thelost

私はあなたが中心にしようとしていることをよく理解していません。ボタン自体は垂直ですか？ –

ボタンhorzintal – thelost

wow wwhy thumbs down – thelost

.container { 
text-align: center; 
} 

.center-element { 
width: 100px; 
text-align: left; 
}

または

.container { 
width: 200px; 
} 

.center-element { 
width: 100px; 
margin: 0px auto 0px auto; 
}

または

.container { 
width: 200px; 
} 

.center-element { 
width: 100px; 
position: relative; 
left: 50%; 
margin-left: -50px; 
}

出典

2012-01-31 17:48:00 ggzone

hmm、理由はわかりませんが、何もしていないので、 – thelost

はうまく動作します。 nice – thelost

あなたはrelative divの中でそれをラップします。次に、左右の余白をautoに設定することができます。

これはあなたが探しているものですか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>website</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
</script> 
<style type="text/css"> 

</style> 
<body> 
    <div style="position:relative; width:500px; height:200px; background:green; text-align:center"> 
     <input type="button" style="width: 268px;height: 145px;" value="Button1"/> 
     <input type="button" style="width: 40px;height: 88px;" value="Button2"/> 
     <input type="button" style="width: 76px;height: 73px;" value="Button3"/> 
    </div> 
</body> 
</html>

出典

2012-01-31 17:48:40 SQLMason

私はそれを試したと思うし、彼らはされていたはずの場所でボタンがwerentしたと思う。 – thelost

あなたはそれらを一緒にしたい場合は、別のdivのボタンをラップする必要があります。その後、ボタンにはマージンの自動は必要ありませんが、折り返しのdivがあります。 – SQLMason

あなたはposition:fixedとtop & leftを割り当てて、あなたの要素を中心にすることを期待することはできません。通常、margin: 0px autoがうまくいきます。以下の例を参照してください。

.button0 { 
    font-family:MS Shell Dlg 2; 
    font-size:8px; 
    font-weight:NORMAL; 
    margin: 0px auto; 
} 
.button1 { 
    font-family:MS Shell Dlg 2; 
    font-size:8px; 
    font-weight:NORMAL; 
    text-align: center; 
    margin: 0px auto; 
} 
.button2 { 
    font-family:MS Shell Dlg 2; 
    font-size:8px; 
    font-weight:NORMAL; 
    margin: 0px auto; 
}

ここはa working fiddle to demonstrateです。

出典

2012-01-31 17:50:32

クールで、中心に置かれていますが、与えられたものは使用しません – thelost

したがって、FIFO以外の方法でそれらの中心を合わせたいのですか？ – SQLMason

jsfiddle - ボタンをブロック要素に合わせて幅を指定し、次に左右の余白を指定するだけです。

出典

2012-01-31 17:50:46 Marcus