zoukankan      html  css  js  c++  java
  • css学习笔记三

       总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步!

     1.水平居中

       1.1):行内元素水平居中,在其父类设置text-align:center;

      

       1.2): 块级元素水平居中有三种

       第一种:定宽的块级元素,可以设置margin:0 auto;

       第二种:把块级元素放进table的td里面,然后设置table的左右水平居中margin: 0 auto;

       第三种:不定宽的块级元素 可以通过设置display:inline,转换成行内元素,再设置text-align:center;

       第四种:不定宽的块级元素  可以通过对其父元素设置float:left;position:relative;left:50%,子元素设置position:relative;left:-50%;实现水平居中

    2.垂直居中

      2.1)父级高度确定的单行文本

          可以通过设置行高line-height与高度一致,实现垂直居中

         2.2)父级高度确定的多行元素

        可以通过设置

      <table>

        <tbody>

                  <tr>

                      <td>需要居中的元素</td>

                 </tr>

               <tbody>

         </table>

         2.3)父级高度确定的多行元素

         可以通过设置父元素display:table-cell来激活vertical-align,再对其设置属性middle

  • 相关阅读:
    学Linux从编译命令开始——arm-linux-gcc常用参数讲解
    暑假计划
    汇编语言
    “&”详解
    密码和密钥的区别
    有关动态库找不到的问题解决方案
    gdb调试基本命令(常用)
    Makefile相关知识
    有关宏定义的bug
    Linux安装时内存如何分区的相关问题
  • 原文地址:https://www.cnblogs.com/kevoin/p/4865607.html
Copyright © 2011-2022 走看看