居中

作者: 随意人生_1b90 | 来源:发表于2017-05-03 17:11 被阅读0次

    1,水平居中

    1-1,行内元素居中

    h1 { text-align: center }

    运行效果:

    可以设置文本,图片等居中排列

    1-2,定宽块状元素居中

    .div1 {  

      border: 1px solid red;

      width: 200px;

      background-color: #ff0;

      margin: 30px auto

    }

    运行效果:

    设置“margin: 30px auto”来实现块状元素居中,元素必须满足定宽(宽度width是固定值)和块状两个条件

    1-3,不定宽块状元素居中

    不定宽度的块状元素有三种方法居中:

    1)加入table标签

    利用table标签的长度自适应性(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

    步骤如下:

    第一步:为需要居中的元素外面加入一个 table 标签(包括 <tbody>,<tr>,<td>)

    <div>

      <table>

        <tbody>

          <tr>

            <td> 不定宽元素一 </td>

          </tr>

        </tbody>

      </table>

    </div>

    第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

    table {

      border: 1px solid red;

      margin: 0 auto

    }

    div { border: ipx solid red }

    运行效果:

    2)设置display: inline方法:

    改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align: center 来实现居中效果

    .div2 { text-align: center }

    运行效果:

    .div2 ul { display: inline }

    运行效果:

    .div2 li {

      display: inline;

      border: 1px solid red;

      margin-right: 20px

    }

    运行效果:

    将上面三组css样式组合为一组,

    .div2 { text-align: center }

    .div2 ul {

      border: 1px solid yellow;

      display: inline

    }

    .div2 li {

      display: inline;

      border: 1px solid red;

      margin-right: 20px

    }

    运行效果:

    这种相比第一种的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,减少了一些功能,比如设定长度值。

    3)设置position: relative和 left: 50%:

    利用相对定位的方式,将元素向左偏移50%,即达到居中的目的

    .div3 {

      position: relative;

      left: 50%

    }

    运行效果:

    2,垂直居中

    2-1,父元素高度确定的单行文本

    设置父元素的 height 和 line-height 高度一致来实现

    .div4 {

      height: 200px;

      line-height: 200px;

      background-color: #0cc

    }

    运行效果:

    注:

    这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离块。

    2-2,父元素高度确定的多行文本

    1)使用插入 table  (包括tbody、tr、td)标签,同时设置 vertical-align: middle。

    <div>

      <table>

        <tbody>

          <tr>

            <td class="td1">

              <p>父元素高度</p>

              <p>父元素高度</p>

              <p>父元素高度</p>

              <p>父元素高度</p>

              <p>父元素高度</p>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

    css代码:

    .td1 {

      height: 500px;

      background: #cc0

    }

    运行效果:

    td 标签默认情况下就默认设置了 vertical-align 为 middle,因此我们不需要设置

    2)设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性

    .div5 {

      height: 300px;

      background: #1F0;

      display: table-cell;

      vertical-align: middle

    }

    运行效果:

    chrome、firefox 及 IE8 以上的浏览器下可以设置,IE6、7 并不支持这个样式, 兼容性比较差,只供大家学习参考。

    3,隐性改变display类型

    有一个有趣的现象就是当为元素(不论之前是什么类型元素,display: none除外)设置以下2个句之一:

    1. position:  absolute

    2. float: left 或 float: right

    简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以display: inline-block(内联块状元素)的方式显示,当然就可以设置元素的width和height了,且默认宽度不占满父元素。

    .div6 {

      width: 300px;

      height: 200px

    }

    .div6 a {

      float: left; /*或 position: absolute*/

      width: 100px;

      background: #0cc

    }

    运行效果:

    相关文章

      网友评论

          本文标题:居中

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