ul 中 li 内容垂直居中和水平居中的方法
1、li内容垂直居中flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:HTML部分:12...
1、li内容垂直居中
flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时,表示灵活的项目将垂直显示,正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下:
HTML部分:
1 2 3 4 5 6 7 8 |
|
CSS部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
效果图:
2、li内容水平居中
flex-direction 属性规定灵活项目的方向。当设置它的属性值为row时(默认值),表示灵活的项目将水平显示,正如一个行一样。 justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,当设置其属性值为center时,表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下:
HTML部分:
1 2 3 4 5 6 7 8 |
|
CSS部分:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
效果图:
更多推荐
所有评论(0)