2

vertical-align:midle; を設定したい 私のコードではli tags.thisへのテキストですが、機能しません...

HTMLコード:

<div id="container">
<ul id="selectable">
    <li class="ui-state-default">AAAA </li>
    <li class="ui-state-default">BBB BBB</li>
    <li class="ui-state-default">CCC </li>
    <li class="ui-state-default">DD</li>
    <li class="ui-state-default">FFFFF</li>
</ul>
<div>

CSS コード:

#container{position:relative; top:30px;}

#selectable{ list-style-type: none;
    margin: 0;
    padding: 0;
    width: 450px;
    display:table;  }

#selectable li{width:80px;
    height:80px;
    margin:4px;
    padding:8px;
    text-align:center;
    float:left;
    list-style:none;
    display: table-cell;
    vertical-align:middle;}`
4

3 に答える 3

1

要素のline-heightと等しい値を設定するだけです。height<li>

#selectable li {
    line-height:80px;
    /* ... your own properties */
}

すべてのブラウザで動作するはずです

さらに、垂直方向に整列する方法に関するリンク。そして、実用的なソリューションへのリンク

于 2013-03-07T18:53:51.177 に答える
0

Flexboxは、あなたが持っている要件に対する唯一の選択肢かもしれないように見えます。ブラウザのサポート：Opera、Chrome、IE10。li必要な数の要素をドロップインできます。

http://codepen.io/cimmanon/pen/mxuFa

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 450px;
}

#selectable li {
  margin: 4px;
  padding: 8px;
  width: 80px;
  height: 80px;
  text-align: center;
  list-style: none;
  vertical-align: middle;
  display: inline-block; /* fallback */
  display: -webkit-inline-flexbox;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

liFlexboxをサポートしていないブラウザのフォールバックとして、要素をフロート/インラインブロックするのは安全です。適切な垂直方向の配置がないだけです。

于 2013-03-07T20:01:44.813 に答える
0

vertical-align:middle;水平メニューを使用したい場合は、次を使用してみてdisplay:inline-block;ください。

#selectable li{
    width:80px;
    height:80px;
    line-height:80px;
    margin:4px;
    padding:8px;
    list-style:none;
    text-align:center;
    vertical-align:middle;
    display:inline-block;
    /* for IE7- */
    zoom:1;
    *display:inline;
}

これdisplay:inline-blockは一般的に、今日のようなほとんどのアイテムにとってより適切な選択であると考えられています.

編集：ヘッダーを完全に読み間違えました

TEXT を垂直方向に揃えます。私の悪い。行の高さを親の高さと同じに設定します (この場合は#selectable li)。上記の CSS は、これを含めるように編集されています。

于 2013-03-07T18:50:42.433 に答える