ul中li水平垂直居中
2018-01-06 10:37
176 查看
我们在写轮播图时,底部的小圆点或数字会放在一个ul下li里,这时候一般都要求小圆点或数字垂直居中,今天就写一个简单的li在ul中水平垂直居中。
轮播图一般有两种,左右轮播和上下轮播,对应的ul中的li也分为水平排列和竖直排列,下面就针对这两种情况分别说明。
1、轮播图左右轮播,li水平排列:
2、轮播图上下轮播,li垂直排列:
效果:
轮播图一般有两种,左右轮播和上下轮播,对应的ul中的li也分为水平排列和竖直排列,下面就针对这两种情况分别说明。
1、轮播图左右轮播,li水平排列:
<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> .box{ width: 100%; height: 200px; border: 1px solid red; } .box ul{ height: 200px; display: flex; flex-direction: row; justify-content: center; } .box ul li{ list-style: none; height: 200px; line-height: 200px; }
效果:
2、轮播图上下轮播,li垂直排列:
<div class="box1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> .box1{ width: 100px; height: 300px; border: 1px solid red; } .box1 ul{ height: 300px; display: flex; flex-direction: column; justify-content: center; } .box1 ul li{ list-style: none; margin: 0 auto; }
效果:
相关文章推荐
- <ul><li></li></ul>之间的文字居中水平显示
- (⊙_⊙)【负值】负边距+定位:水平垂直居中,去除列表右边距,去除列表最后一个li元素的border-bottom
- div,li内部图片自适应水平垂直居中
- div+css之让ul及li水平居中于div
- ul li图片文字混排不加overflow:hidden,使文字垂直居中(完美版)
- CSS水平垂直居中的几种方法
- 完美DIV、图片水平垂直居中
- CSS 水平垂直居中 方法四
- 水平垂直居中
- 图片居中,图片垂直居中,图片水平居中
- 4000 各种元素水平垂直居中
- css水平垂直居中的方法与 vertical-align 的用法
- 容器,文字的水平和垂直居中的方法
- 文字垂直居中,水平居中 a标签水平居中只要给他的父级设置text-align=center
- CSS布局:图片在DIV中上下左右居中(水平和垂直都居中)
- css 所有元素垂直、水平居中
- CSS使元素水平垂直居中的方法
- CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)
- div下的图片水平居中和垂直居中
- CSS布局div之水平居中与垂直居中