0

リストアイテム内にdivがあり、リストアイテムの中央にdivを配置しようとしているhtmlページがあります（divの幅がリストアイテムの幅よりも小さい）。私のCSSは次のようになります

ul.my {
    width: 100px;
    padding: 0;
}

li.my {
    list-style: none;
}

div.content {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

そして、HTMLには次のようなスニペットがあります

<li class="my"><div class="content">stuff</div></li>

ただし、divは左揃えです。どうすれば適切に中央揃えできますか？

4

2 に答える 2

1

divのコンテンツを水平方向に中央揃えにすることができます

div.content {
    width: 100%;
    text-align: center;
}

またはdiv自体を中央に配置します。

.my li {
    text-align: center;
}
div.content {
    display: inline-block;
}

垂直方向のセンタリングの場合、次のようにdisplay: table-cell要素をdisplay:table1つにラップする必要があります。

.my li {
    height: 200px;
    display: table;
}
div.content {
    display: table-cell;
    vertical-align: middle;
}
于 2012-11-01T23:02:24.110 に答える
0

css と html は本当に関連していますか?

.myクラスはli要素上にあるため、スタイリングは次のようになります。

li.my {
  // li styles
}

ul周りに大きなコンテナがない限り、.my ulここでも当てはまりません。

これらの変更とは別に、次のいずれかを使用しli { text-align: center; }ますdiv { margin: auto; }

更新 (垂直センタリング):

垂直方向のセンタリングの場合、テキストがすべて 1 行にある場合は、次のようline-heightに を と同じサイズに設定してみてくださいfont-size。

div.content {
  font-size: 14px;
  line-height: 14px;
}

2 行以上にまたがる場合は、少しトリッキーです。 これを試してください。

于 2012-11-01T22:59:00.753 に答える