首页 > 如何让div下的ul标签水平居中?

如何让div下的ul标签水平居中?

绿色部分是一个div,里面的内容是ul标签下的两个li标签,如何水平居中?

我试过将div 设为{position:relative;}
ul设为{

 position:absolute;
 top: 20px;
 left: auto;
 }

结果是这样:

求解!


如果设置position:absolute的话会导致该元素脱离文档流,即造成你那样的效果;
可以将ul设置成 display:inline-block;
然后给ul的父元素添加 text-align:center样式就好;

我总结过些水平居中的例子,可以参考下:http://blog.zhangyulei.site/2016/03/22/%...


给ul套一个div,设置这个div内边距上下为0,左右自动。


设置ul的宽度,并且让ul的margin-left和margin-right都为auto


设置ul的宽度=li的宽度总和

ul{
    width:200px;/*自己设置ul的宽度*/
    position:absolute;
    left:50%;
    margin-left:-100px;/*设置ul的宽度的一半*/
}
【热门文章】
【热门文章】