センタリングの問題

私は、水平にセンタリングされたイメージとその下のいくつかのボタンでページを作ろうとしています。私は画像を中心に使用しましたセンタリングの問題

.Image { display:block; margin:auto; }

これは素晴らしいことでした。浮動しているボタンを中央に配置しようとしたときにいくつかの問題が発生しました。私はそれは不可能だと、読んで、そしてその使用に頼っ：

ul li{display:inline-block;}

と

body{text-align:center;}

それは働いたが、2つの要素が揃っていないようです。ボタンは数ピクセル離れているようです。ここでの結果は次のとおりです。

私はそれらを適切にセンタリングするかどうかはわかりません。

2016-03-24 nnokalad

'表示：インラインブロック;'何もセンタリングすることと何も関係がありません。 – Scott

ええ、もし何かを浮かべることができなければ、あなたはそれを使用し、それを中心にしなければなりません。 – nnokalad

margin: 0 auto;はdisplay: inline-block;で動作しません。

あなたは、margin: 0 auto;を使用あなたがdisplay: inline-block;と一緒に行きたい場合は、display: blockまたはdisplay: table; /* which is not good */
を使用すると、その親にtext-align: center;を追加したい場合。詳細情報については

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    text-align: center; 
 
} 
 

 
ul li { 
 
    display: inline-block; 
 
}

<ul> 
 
    <li>a</li> 
 
    <li>b</li> 
 
    <li>c</li> 
 
    <li>d</li> 
 
    <li>e</li> 
 
    <li>f</li> 
 
</ul>

2016-03-24 05:01:05 w3debugger

あなたは試すことができます：

.Image { margin:0px auto; }

をあなたもdiv要素を持っている場合は....あなたが中心のため、この共同ORDを使用することができます.....

2016-03-24 05:04:52

答えて