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

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

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

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

其他就简单了：

先把ul宽高用百分比；

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

li的宽高也百分比

a的宽高也百分比

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

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

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

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

再然后就是媒体查询：

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

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

<div class="wrapper"> <ul id="lists">
  <li><a href="####"><img src="1jpg" alt="" /></a></li>
  <li><a href="####"><img src="1jpg" alt="" /></a></li>
  <li><a href="####"><img src="1jpg" alt="" /></a></li>
  <li><a href="####"><img src="1jpg" alt="" /></a></li>
  <li><a href="####"><img src="1jpg" alt="" /></a></li>
  <li><a href="####"><img src="1jpg" 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: 47%;
} #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: 54%;
} #lists li img{
  width: 100%;
  height: 100%;
} #lists li a{
  width: 100%;
  height: 100%;
  display: block;
  border: 1px red solid;
}}

另外：

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

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

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

传说中的Z：

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

亲~ 如果你要 li 的 position:absolute 是相对于 ul 的话那你 ul 的 position 应该为 relative 啊还有让一个元素水平居中的办法很简单比如 ul{margin:0 auto;} 就可以水平居中该 ul 了。
麻烦采纳，谢谢!

上面是代码，把代码复制到html文件中，用浏览器打开看看吧。

css设置ul的li 居中均匀排列,我们首先需要做的就是将这个ul的width和height确定，使用margin让ul居中，margin的用法如图：

，然后在设置li的width和height，然后给li一个float，通过代码来理解：

<html>

<head>

<style>

ul{

width:300px;

height:30px;

border:1px solid #f00;

marign:0 auto;

}

li{

width:50px;

height:30px;

float:left;

}

</head>

<body>

<ul>

</ul>

</body>

</html>

div {
position: relative;
}
ul {
display: block;
width: 100px;
margin: 0 auto;
position: relative;
}
重点是有 width 和 margin: 0 auto; 而父辈是 position: relative;
想 ul 里的内容不会溢出来的话加上 overflow: hidden;

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/yw/13362871.html

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

发表评论

评论列表（0条）