zoukankan      html  css  js  c++  java
  • CSS-——水平居中设置

    1.行内元素水平居中方法:如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

    2.块状元素——定块状元素水平居中方法:

    (1)定宽块状元素:块状元素的宽度width为固定值。

    (2)当width设为固定值时,text-align:center不起作用,要通过设置“左右margin”值为“auto”来实现居中的。

    (3)如:200px;/*定宽*/        margin:20px auto/*居中*/   


    3.块状元素——不定块状元素水平居中方法1:

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

    (2)方法:第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

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

    (3)例子:

    .wrap{
    background:#ccc;
    display:table;
    margin:0 auto;
    }

    <div class="wrap">
    设置我所在的div容器水平居中
    </div>

    4.块状元素——不定块状元素水平居中方法2:

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

    (2)如:

    .container ul{
        list-style:none;
        margin:0;
        padding:0;
        display:inline;
    }
    5.块状元素——不定块状元素水平居中方法3:
    (1)通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
  • 相关阅读:
    (转)轻松应对IDC机房带宽突然暴涨问题
    (转)老男孩:Linux企业运维人员最常用150个命令汇总
    (转)cut命令详解
    (转)Awk使用案例总结(运维必会)
    (转)Nmap命令的29个实用范例
    BigPipe学习研究
    js正则大扫除
    ffff表单提交的那点事
    高并发订单操作处理方法
    订单号的处理
  • 原文地址:https://www.cnblogs.com/carrier-sisi/p/7616502.html
Copyright © 2011-2022 走看看