zoukankan      html  css  js  c++  java
  • 水平居中总结

    1.行内元素
    如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。
    2.块级元素
    块级元素分为定宽不定宽两种
        定宽块级元素用text-align就不起作用了,此时可以设置margin:0 auto;也就是说要想用margin达到水平居中,必须满足两个条件:定宽+块状,缺一不可。
    不定宽块状有三种方法:
    第一种:加入table标签,设置margin(之所以可以这样是table长度自适应,即table的长度根据他文本的长度决定,并且它是块级元素,所以满足那两个条件)
    <table>
      <tbody>
        <tr><td>
    <ul>
         <li>我是第一行文本</li>
            <li>我是第二行文本</li>
            <li>我是第三行文本</li>
        </ul>
        </td></tr>
      </tbody>
    </table>
    第二种:display:inline;将块状改成行内,用text-align;
    第三种:定位,position:relative;left:50%;达到居中目的;通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
  • 相关阅读:
    SQL注入攻击
    Collections使用
    jquery实现table按时间排序
    浏览器存储及使用
    android实现屏幕旋转切换fragment
    安卓保存图片到图库demo总结
    android service基础
    正则表达式学习总结
    注解和枚举回顾
    Vue+Element项目日期选择器类型转化的问题
  • 原文地址:https://www.cnblogs.com/5811yc/p/5920395.html
Copyright © 2011-2022 走看看