0

これが私のページ構造です。

ここに画像の説明を入力

以下のすべての「li」内に画像があります。これらの画像を li 要素内に配置しようとしています。左右のマージンを自動に設定してこれを実行しようとしていますが、機能していません。

これがcssです。

#navcontainer ul li
{
    display: inline-block;
    width:80px;
}

#navcontainer ul li img
{
    margin-right:auto;
    margin-left:auto;
}

私はそれが機能しているcssで幅や高さ、またはその他のものを設定するときにcss、bcsから要素にアクセスすることではないと確信しています。しかし、私はそれを中央に揃えることができませんでした。

4

1 に答える 1

2

の場合はinline-block、単にtext-align: center親li要素で使用します。

の場合は、 ( , , )display: blockを使用できます。margin: 0 auto 0 autotoprightbottom left

orの唯一の有効な子要素は要素であることも指摘しておく価値があります。他のコンテンツはでラップする必要があります。そうしないと、マークアップが無効になり、ユーザー エージェントは DOM の準備時にマークアップを修正しようとします。また、さまざまなユーザー エージェント間で一貫性があるわけではありません。ulollili

次のマークアップをデモンストレーションとして使用します。

<ul>
    <li class="inlineBlock"><img src="http://lorempixel.com/100/100/sports" /></li>
    <li class="block"><img src="http://lorempixel.com/100/100/nature" /></li>
</ul>​

次の CSS を使用します。

li.inlineBlock {
    text-align: center;
}
li.inlineBlock img {
    display: inline-block;
}

li.block img {
    display: block;
    margin: 0 auto 0 auto;
}​

JS フィドルのデモ。

于 2012-05-28T14:16:56.670 に答える