1

ulタグがあり、その中にheight:300pxいくつかのliタグがあります。

<ul>
   <li> some text</li>
   <li> some other text</li>
</ul>

このリストをulタグの中央に垂直に配置したいと思います。
設定したくないposittion:absolute。以下のcssをテストしましたが、機能しません。

ul{
  height: 300px;
  vertical-align: middle;
}
li{
  margin:auto;
}

cssをください！

4

2 に答える 2

4

このような？

CSS

ul {
    height: 300px;
    display: table-cell;
    vertical-align: middle;
    background-color: lime;
}

li {
    display: inline-block;
    background-color: fuchsia;
}​

デモ

JSFiddle

于 2012-08-25T01:30:13.760 に答える
2

これが私の解決策ですが、固定の高さ (この例では 300px) を持つ追加の要素が必要です。その後、UL要素はデフォルトで に許可さheight: auto;れ、非表示の疑似要素によって垂直方向に中央に揃えられます。

jsfiddle: 中央に垂直方向に配置された要素

疑似要素は、それを含む要素の外側および左側に配置され、 として設定されvertical-align: middle;ます。

container:before {
  cotent: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-left: -100%;
  vertical-align: middle;
}

これにより、コンテナーの子要素は、親要素の高さを持つ疑似要素に垂直方向に整列できます。

于 2012-08-25T01:44:21.267 に答える