• 技术文章 >web前端 >css教程

    css li怎么水平居中对齐

    藏色散人藏色散人2021-02-18 09:57:59原创103

    css li水平居中对齐的方法:首先创建一个HTML示例文件;然后定义好li标签;最后通过“overflow: hidden;margin: 100px auto;”等属性实现水平居中对齐即可。

    本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑。

    css实现多列li元素水平居中效果的方法

    分享一段代码实例,它实现了让多列li元素水平居中效果。

    这里的水平居中其实也就是li元素均匀分布效果。

    代码实例如下:

    <!doctype html><html>
    <head>
    <meta charset="utf-8">
    <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 1180px;
      height: auto;
      margin: 100px auto;
      border: 1px solid #f00;
      overflow: hidden;
    }
    .main ul {
      width: 1120px;
      list-style: none;
      margin: 0 auto;
    }
    .main ul li {
      width: 100px;
      height: 100px;
      margin-right: 20px;
      margin: 20px;
      background: #f00;
      float: left;
    }
    </style>
    </head>
    <body>
    <div class="main">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    </body>
    </html>

    效果图:

    ef05b18e8b0215dc2b089fdcccaf4f4.png

    上面的代码实现了我们的要求,下面简单介绍一下它的实现原理。

    设置ul元素的宽度等于li元素的宽度和加上外边距的值,假定这个值用w来表示。

    ul的父元素的宽度是w-margin-right(20px),并且此父元素具有overflow:hidden属性,那么超出的外边距就会被隐藏。

    推荐:《css视频教程

    以上就是css li怎么水平居中对齐的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css里的rgb怎么用 下一篇:css绘制扇形进度条
    第15期线上培训班

    相关文章推荐

    • css怎么写一个直角三角形• css 怎么设置图片为六边形• css怎么做个红色的心• css首行缩进怎么弄• css样式怎么把按钮变圆

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网