html5ul横向居中，html纵向居中

html怎么让ul li居中？我应该在哪里加代码？

要实现UL标签水平居中，关键在于CSS中 display:inline 的运用。具体示例：HTML代码123456789divid="links"ulliahref="#"关于倡萌/a/liliahref="#"广告合作/a/liliahref="#"版权声明/a/liliahref="#"联系倡萌/a/liliahref="#"友情链接/a/li/ul/divCSS样例12345#links{height:40px;}#linksul{text-align:center;list-style-type:none;}#linksulli{display:inline;}

相关问答

Q1: 求ul中的li布局CSS布局，横向垂直都要居中，如何实现？

A.每个图片宽高是统一的还是不一样的?如果不统一，请直接跳到我的回答末尾处，参看：Z

B.这样做要上下垂直居中是css目前办不到的，请用js，同上，直接跳到回答末尾：Z处

C.关于上一条B垂直居中的问题：但如果图片数量够多能撑开浏览器高度到设备屏幕一屏高度区域以外就不存在这个垂直居中问题了，本身就垂直居中了

其他就简单了：

先把ul宽高用百分比；

接着把li浮动(不考虑pc端的话，inline-block也行)

li的宽高也百分比

a的宽高也百分比

最后里面的img宽高也百分比

就是一直从ullia一层一层下来，每个子都是百分比尺寸相对父宽高

(我后面代码里还多个包含ul的div，是编辑器生成的模板基础上写的，你可以删掉那个div)

至于图片6个变成13个或57个的问题，总体图片数量不固定，每行数量又根据屏幕大小在变，一行两个图、三个图或更多，肯定有不能整除会落单的图片，那个你没有任何办法处理，只能让最后一行有空位，数学上不能整除，任何程序语言都无能为力的事情

再然后就是媒体查询：

屏幕宽超过你设定的界限时，li的百分比宽度小点，然一行能排三个或更多

屏幕宽小于你设定的界限时，把li百分比宽度设置到40-50%左右，一行只摆两个

div class="wrapper"

 ul id="lists"

  lia href="####"img src="1.jpg" alt="" //a/li

  lia href="####"img src="1.jpg" alt="" //a/li

  lia href="####"img src="1.jpg" alt="" //a/li

  lia href="####"img src="1.jpg" alt="" //a/li

  lia href="####"img src="1.jpg" alt="" //a/li

  lia href="####"img src="1.jpg" alt="" //a/li

 /ul

/div

body {

 margin: 0;

 padding: 0;

}

@media screen and (min-width: 1px) and (max-width: 319px) {

/*小于320x480的老式手机设备一般不用管了吧，上面有webkit内核浏览器的太少了，有ie9-10的基本上不存在*/

}

@media screen and (min-width: 320px) and (max-width: 480px) {

 .wrapper

 {

  width: 100%;

  height: 100%;

  margin: 0 auto;

  text-align: left;

  border: 1px red solid;

  background: #4A2C40;

 }

 #lists{

  width: 100%;

  height: 100%;

  border: 1px green solid;

 }

 #lists li{

  display: inline-block;

  width: 40%;

  height: 30%;

  margin: 2%;

  border: 1px #fff solid;

  position: relative;

  left: 10%;

 }

 #lists li img{

  width: 100%;

  height: 100%;

 }

 #lists li a{

  width: 100%;

  height: 100%;

  display: block;

  border: 1px red solid;

 }

}

@media only screen and (min-width: 321px) and (max-width: 1024px) {

 .wrapper

 {

  width: 100%;

  height: 100%;

  margin: 0 auto;

  text-align: left;

  border: 1px red solid;

  background: #333;

 }

 #lists{

  width: 100%;

  height: 100%;

  border: 1px green solid;

 }

 #lists li{

  display: inline-block;

  width: 40%;

  height: 30%;

  margin: 2%;

  border: 1px #fff solid;

  position: relative;

  left: 4.7%;

 }

 #lists li img{

  width: 100%;

  height: 100%;

 }

 #lists li a{

  width: 100%;

  height: 100%;

  display: block;

  border: 1px red solid;

 }

}

 

@media only screen and (min-width: 1029px){

 .wrapper

 {

  width: 100%;

  height: 100%;

  margin: 0 auto;

  text-align: left;

  border: 1px red solid;

  background: #14334D;

 }

 #lists{

  width: 100%;

  height: 100%;

  border: 1px green solid;

 }

 #lists li{

  display: inline-block;

  width: 25%;

  height: 30%;

  margin: 2%;

  border: 1px #fff solid;

  position: relative;

  left: 5.4%;

 }

 #lists li img{

  width: 100%;

  height: 100%;

 }

 #lists li a{

  width: 100%;

  height: 100%;

  display: block;

  border: 1px red solid;

 }

}

另外：

1.li 的相对定位是为了让所有图片横向看上去相对居中(没办法绝对精确)，要绝对，参考：Z处

2.代码里面很多玩意100%了，再加1px边框理论上是不对的，只是写的时候方便看元素大小，要算尺寸应该-1px再算百分比

3.实际上我是在firefox上直接拉窗口大小测试的，实现了图片随屏幕大小缩放，窗口小于一定尺寸时一行三个图变切换为一行两个；但是大半夜了我也不敢去卧室翻平板和手机出来试，真机环境上估计可能上面的代码可能还得改改才能跑。而且估计webkit和ie9-10环境下估计细节还有错误需要兼容处理..

...

...

...

...

传说中的Z：

你这个需求麻烦啊麻烦，要用js处理好多复杂的细节还有各种兼容的坑等人跳，知道上有人帮你写出来现成代码的几率恐怕小于0.001%！！！

Q2: 怎么设置ul ,li标签元素横排且居中啊？

让LI单独居中不行，但可以让UL居中。比如有五个LI标签，每一个LI的宽度是100px，就把UL的宽度设为500px 然后居中;

eg: ul {width:500px; height:auto; margin:0px auto;}

ul li { width:100px; float:left; text-align:center}

Q3: htmlcss里面一个div里的ul怎么让他居中对齐？

1、首先先打开我们的开发环境新建一个web项目。

2、在html中引入css文件这里是html页面的代码div和ul。

3、将所有标签的margin和padding初始为0然后将父级div的display设置为flexalign-items设置为center。

4、运行web项目后得到的结果如图所示垂直居中了。

5、 将display设置为table-cell，将vertical-align设置为middle即可。

6、将ul的高度设置为百分比然后使用相对定位设置top为二分之一的百分之百减去ul的高度即可。

7、使用line-height将其设置div的高度必须是确定值，然后将li左或者右浮动即可。

html5ul横向居中的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html纵向居中、html5ul横向居中的信息别忘了在本站进行查找喔。