我一直在试图让这个钉了很久,但似乎无法弄清楚。我只需要在每个<ul>
的中心水平和垂直对齐文本,但它不会发生。 JSFiddle垂直对齐里面的列表项
我哪里错了?
#HomeRight {
position: absolute;
width: 120px;
top: 120px;
bottom: 100px;
right: 0;
}
#HomeRight ul {
margin: 0;
padding: 0;
height: 100%; \t
display: table;
}
#HomeRight li {
display:table-cell;
float:left;
width:120px;
height:25%;
text-align:center;
vertical-align:middle;
background-color: rgba(0, 0, 0, 0.4);
border: 1px solid transparent;
background-clip: padding-box;
}
<div id="HomeRight">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
这是你在找什么https://jsfiddle.net/ds827wnd/1/? –
请注意,如果你写'float',你的'display'属性将被转换为'display:block',所以你的'display:table-cell'不能正常工作 –