I have the following HTML code:
<div class="playerInfo">
<ul>
<li id="playerTeam">
team
</li>
<li id="player">
player
</li>
</ul>
</div>
I have the following CSS style for the same:
.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;
}
I want the li blocks to be vertically in the middle, but vertical-align: middle does not work, and the li elements begin from the top! Also, I would like there to be a gap between these li blocks, so that they are aligned center, but with a gap between each other. How do I do that?
Sorry, misread the question. Correct aswer would be:
<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%);
}
This is how you could center text in li
element. If You can modify Your DOM, then wrap text in span:
<div class="playerInfo">
<ul>
<li id="playerTeam">
<span>team</span>
</li>
<li id="player">
<span>player</span>
</li>
</ul>
</div>
And modify stylesheet:
.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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.