Question

我想设置vertical-align：middle;将文本转换为li tags.this在我的代码中，但它不起作用...

HTML CODE：

<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;}`

Answer 1

只需将line-height设置为等于height元素的<li>。

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

应该适用于所有浏览器

另外还有关于如何垂直对齐的link。以及指向工作solution

的链接

Answer 2

如果您想使用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通常为considered a more appropriate choice。

编辑：完全误读标题

您希望TEXT垂直对齐。我的错。将line-height设置为等于父级的高度（在本例中为#selectable li）。上面的CSS已被编辑以包含此内容。

Answer 3

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;
}

对于不支持Flexbox的浏览器，浮动/内联阻止li元素作为回退是安全的，它只是没有正确的垂直对齐。

使用float：left属性在多个li标签中垂直对齐文本

3 个答案: