我有以下 HTML 代码:
<div class="playerInfo">
<ul>
<li id="playerTeam">
team
</li>
<li id="player">
player
</li>
</ul>
</div>
我有以下相同的 CSS 样式:
.playerInfo{
width: 60%;
height: 30%;
margin: auto;
background-color: #888;
}
.playerInfo ul{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.playerInfo li{
display: inline-block;
width: 30%;
height: 80%;
vertical-align: middle;
background-color: #555;
}
我希望 li block 垂直居中,但是 vertical-align: middle 不起作用,而且 li 元素从顶部开始!另外,我希望这些 li block 之间有一个间隙,以便它们居中对齐,但彼此之间有一个间隙。我该怎么做?
最佳答案
抱歉,误读了问题。正确答案是:
<div class="playerInfo">
<ul>
<li id="playerTeam">
<span>team</span>
</li>
<li id="player">
<span>player</span>
</li>
</ul>
</div>
.playerInfo{
width: 60%;
height: 200px;
margin: auto;
background-color: #888;
position: relative;
}
.playerInfo ul{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
height: 100%;
}
.playerInfo li{
display: inline-block;
width: 30%;
height: 80%;
background-color: #555;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
这就是在 li
元素中居中文本的方法。
如果您可以修改您的 DOM,则将文本包装在 span 中:
<div class="playerInfo">
<ul>
<li id="playerTeam">
<span>team</span>
</li>
<li id="player">
<span>player</span>
</li>
</ul>
</div>
并修改样式表:
.playerInfo{
width: 60%;
height: 30%;
margin: auto;
background-color: #888;
}
.playerInfo ul{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.playerInfo li{
display: inline-block;
width: 30%;
height: 80%;
background-color: #555;
position: relative;
}
.playerInfo li span{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
关于div 中的 HTML CSS ul 和 li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31960355/