美文网首页
css实现多数量的li水平居中

css实现多数量的li水平居中

作者: 简小咖 | 来源:发表于2017-12-22 15:35 被阅读0次

这个问题看上去很简单,实现起来也得下点功夫


image.png
  • HTML
<div class="imgList_bg">
   <ul id="imgList">
      <li>
        <img src="img/1.jpg" alt="">
      </li>
      <li>
        <img src="img/2.jpg" alt="">
      </li>
      <li>
        <img src="img/3.jpg" alt="">
      </li>
      <li>
        <img src="img/4.jpg" alt="">
      </li>
   </ul>
</div>
  • css
.imgList_bg {
     position: absolute;   //此属性根据需要确定上下位置
     bottom: 10px;
     width: 100%;         
     text-align: center
}
#imgList {
     display: inline;
     margin-left: -10px
}
#imgList li {
     display: inline-block;
     margin-left: 10px;
}
#imgList li img {
     width: 100px;
     height: 70px;
     border: 3px solid #f8f8f8;
}

这样就可以是实现不同数量的li都可以水平居中

相关文章

  • css实现多数量的li水平居中

    这个问题看上去很简单,实现起来也得下点功夫 HTML css 这样就可以是实现不同数量的li都可以水平居中

  • CSS解决盒模型居中的问题

    CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种:...

  • CSS布局(不完全)总结

    CSS布局(不完全)总结 实现水平居中布局的几种方式 方法一: 通过以下CSS代码实现水平居中布局 方法二: 通过...

  • css 实现水平居中的方法总结

    css 实现水平居中,垂直居中,水平垂直居中,是css 入门的必修课题,也是代码实践,笔试面试中经常遇到的场景。这...

  • CSS图片居中(水平居中和垂直居中)

    css图片水平居中 css图片垂直居中 css图片水平垂直居中

  • CSS常用布局实现

    该系列用于整理记录常用的CSS布局实现。 CSS常用布局实现01-水平居中 CSS常用布局实现02-垂直居中 CS...

  • 2018-09-26

    转载:CSS实现水平垂直居中的10种方式

  • 动态设置div css属性

    jQuery实现水平和垂直居中 jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取D...

  • margin负值应用实例

    1. 水平垂直居中 利用margin负值可以实现元素的水平垂直居中 html代码: CSS代码 实现效果 2. 列...

  • css 水平垂直居中实现方式

    css 水平垂直居中实现方式 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 块级元素结构 ...

网友评论

      本文标题:css实现多数量的li水平居中

      本文链接:https://www.haomeiwen.com/subject/exfxgxtx.html