How does HTML center the li in ul horizontally and vertically?
This article is a detailed introduction to "HTML how to make li horizontal and vertical center in ul". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "HTML how to make li horizontal and vertical center in ul" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.
1. The rotation chart rotates left and right, li is arranged horizontally:
1
2
3
4
.box{
width:100%;
height:200px;
border:1pxsolidred;
}
.boxul{
height:200px;
display:flex;
flex-direction:row;
justify-content:center;
}
.boxulli{
list-style:none;
height:200px;
line-height:200px;
}
Effect:
Vertical Center 1.png
2, carousel map up and down carousel, li vertical arrangement:
1
2
3
4
.box1{
width:100px;
height:300px;
border:1pxsolidred;
}
.box1ul{
height:300px;
display:flex;
flex-direction:column;
justify-content:center;
}
.box1ulli{
list-style:none;
margin:0auto;
}
Read here, this article "HTML how to make ul li horizontal vertical center" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.
