[英]HTML CSS ul and li in a div
我有以下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块垂直位于中间,但vertical-align:中间不起作用,并且li元素从顶部开始! 另外,我希望这些li块之间存在间隙,以便它们居中对齐,但彼此之间有间隙。 我怎么做?
不好意思,看错了问题。 正确的查询是:
<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%);
}
use padding instead of giving specific height for li as shown below
<div class="playerInfo">
<ul>
<li id="playerTeam">
team
</li>
<li id="player">
player
</li>
</ul>
</div>
<style>
.playerInfo{
width: 60%;
height: 30%;
margin: auto;
background-color: #888;
}
.playerInfo ul{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.playerInfo li{
background-color: #555;
display: inline-block;
padding: 11% 0;
vertical-align: middle;
width: 30%;
}
</style>
hope it helps
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.