我想设置为:font - family:宋体;将文本放入li标签中。这在我的代码,但它不工作…
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;}`
将line-height
设置为等于<li>
元素的height
。
#selectable li {
line-height:80px;
/* ... your own properties */
}
应该能在所有浏览器上工作
另外还有一个如何垂直对齐的链接。和一个指向工作解决方案的链接
如果您想使用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
通常被认为是一个更合适的选择,对于大多数像这样的物品,现在
编辑:完全误读头
您希望文本垂直对齐。我的坏。设置行高等于父行高(在本例中为#selectable li
)。上面的CSS已经被编辑为包含这个
Flexbox看起来可能是您满足需求的唯一选择。浏览器支持:Opera, Chrome, IE10。你可以加入任意数量的li
元素
#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的浏览器来说,浮动/inline-block li
元素是安全的,它只是不会有正确的垂直对齐。