css如何让自适应宽度的块居中显示

最新推荐文章于 2024-04-11 00:14:29 发布

转载最新推荐文章于 2024-04-11 00:14:29 发布 · 189 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yc-web/p/7069678.html

本文介绍了一种利用CSS实现响应式居中布局的方法。通过在父级应用text-align:center及display:inline-block属性，使得块级元素能够居中显示且自适应不同屏幕尺寸。

  <div class='footer'>      
      <ul>
          <li>网站首页</li>
          <li>企业招聘</li>
          <li>联系我们</li>
          <li>讲师招聘</li>
      </ul>
  </div>

    .footer{
        width: 100%;
        height: 100px;
        background: black;
        position: fixed;
        bottom: 0;
        text-align: center;
    }
    .footer ul{
        display: inline-block;
        color: white;
    }
    .footer li{
        height: 100px;
        line-height: 100px;
        float: left;
        margin-right: 20px
    }