web-dev-qa-db-ja.com

物事をセンタリングする方法-display：block / inline-block

Htmlとcssに物事を集中させるとき、私は2つのアプローチを見つけます-要素に適用するか：

display:block;
margin:0 auto;

または使用：

display:inline-block;
text-align:center; (on the parent element)

どちらが良いのか、なぜだろうかといつも思っています。ありがとう!!

htmlblockcentercss
21
user2335065

これは古典的な重要な質問です。

要素は、インライン（spanタグのようにすべてが隣り合って配置されることを意味する）か、ブロック（divタグのように互いの上にスタックを意味する）のいずれかです。

マージン：自動は、最初に見たときに少し奇妙ですが、ブロックレベル（静的な位置）の要素を中央に配置するための最良かつ唯一の方法です。

表示されるものはすべて：インライン（スパンタグなど）-only親へのtext-align：centerを指定した場合の中央揃え方法です。これにより、すべての表示が中央に配置されます。その中にインラインであり、位置は静的です。

表示：インラインブロックは相対的 newの2つのハイブリッドです（ただし、別の回答に記載されているハックを使用する場合はie7までサポートされます）。インラインブロックを使用すると、インラインの利点が得られます。つまり、一連の物を並べて中央に配置することができます（すべてのナビゲーションアイテムがすべて中央に配置されているナビゲーションを考えてください）。 itemはdisplay：blockで得られるもののいくつかを利用します-ブロック-HEIGHTである最も重要なもの。

各navアイテムの背景画像の高さが80pxであるシナリオを想像してください。インライン要素の高さを80にすることはできません。したがって、各要素を表示する必要があります。高さ。したがって、それらをすべて隣り合わせに表示するには、それらをフロートさせます。問題は、それらをフロートする場合、ナビゲーションとマージンに固定幅を与えない限り、それらをすべてページの中央に配置できないことです：auto THAT。これは、navの幅が固定されていることを意味します-大丈夫かもしれませんが、navに動的要素、異なる言語の異なる幅などが必要な場合があります。

Enter表示：インラインブロック。

15
gcoladarci

ブロック要素は常に中央に配置する必要があります

.block {
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

w3cで述べられているように： http://www.w3.org/Style/Examples/007/center.en.html#block

text-align: center;

よく知られています：テキストの中央揃えに使用します。

更新

display: flexを使用することもできます：

.parent {
    display: flex;
    justify-content: center;
}
.block {
    width: 200px;
}
7
evuez

この状況では、両方のアプローチが機能し、両方が修正されるより良い方法はありません。 IE7ではインラインブロックが機能しない（このブラウザーをサポートしている場合）には、ハックが必要です。

display: inline-block;
*display: inline;
zoom: 1;
4
Vinícius Moraes