码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-06-23 15:40:40      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:class   自适应   pre   idt   宽度   text   fixed   center   网站   

  <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
    }

      在父级加上 text-align: center;   虽然这个属性只对行内元素有效,但是同时把需要居中的块设置上 display: inline-block; 这样就可以把块级元素转化为拥有块级属性的行内元素,从而让text-align生效,达到自适应宽度居中显示。

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

标签:class   自适应   pre   idt   宽度   text   fixed   center   网站   

原文地址:http://www.cnblogs.com/yc-web/p/7069678.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!