15. 居中

Posted lhsaq2009

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了15. 居中相关的知识，希望对你有一定的参考价值。

水平居中设置

    1. 内联元素
      1. 文本、图片等内联元素
        1
        <div style="text-align:center;">我是文本,我想要居中显示</div>
    2. 块级元素
      1. 定宽
        1. 块元素 或 display:block; 且要指定宽度；
          1
          <div style="width:500px;margin:0 auto;">我是定宽块状元素，我要水平居中显示</div>
      1. 不定宽
        1. 比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中：
          1. 加入 table 标签
            1. 为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
            2. 为这个 table 设置 margin:0 auto;（这个和定宽块状元素的方法一样），这种方式，低版本的IE可能不认识，html 第一行需要加入dtd头，如下：
              技术分享图片  
              不过自己目前 使用                <!DOCTYPE html> 也解决了。
          2. 设置 display:inline 转 化为 内联元素
            1. 改变块级元素的 display:inline 类型，然后父级使用 text-align:center 来实现居中效果。
              1
              2
              3
              4
              5
              <div style="text-align:center;">
                  <ul style="list-style:none;margin:0;padding:0;display:inline;">
                      <li style="margin-right:8px;display:inline;"><a href="#">1</a></li>
                  </ul>
              </div>
              这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display:inline，变成了行内元素，所以少了一些功能，比如设定长度值。
          3. 设置 position:relative 和 left:50%;
            1. 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
              1. 使用 left: 450px;需配合 position 使用，否则没效果. 但是这样写，在窗口大小改变时容易变形，所以 使用      margin: 0 auto; 

垂直居中

    1. 父元素高度确定的单行文本，通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：
      1
      <div style="height:100px;line-height:100px;background:#999;">hi,imooc!</div>
    2. 父元素高度确定的多行文本
      1. 方法一：使用插入 table(包括tbody、tr、td)标签，同时设置 vertical-align：middle
        1. 说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。
          1
          2
          3
          4
          5
          <table><tbody><tr><td class="wrap">
          <div>
              <p>看我是否可以居中。</p>
          </div>
          </td></tr></tbody></table>
      2. 方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
        1
        2
        3
        4
        5
        6
        <div style="height:300px;display:table-cell;vartical-align:middle;">
            <div>
                <p>看我是否可以居中</p>
                <p>看我是否可以居中</p>
            </div>
        </div>

隐性改变display类型

    1. 当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：position : absolute 或者 float浮动
      元素会自动变为以 display:inline-block，      当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
      a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
      1
      2
      3
      <div>
          <a href="#" style="position:absolute;width:200px;background:#ccc;">进入课程</a>
      </div>





sj1





2018年5月15日 23:33:55





























以上是关于15. 居中的主要内容，如果未能解决你的问题，请参考以下文章

css常用代码片段 (更新中)

片段中的布局不居中

是否可以使用 AndroidX 导航将片段中的操作栏标题居中？

VSCode自定义代码片段15——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

C语言代码片段