水平和垂直居中

纵然是瞬间 提交于 2019-12-21 04:30:06

水平居中

行内元素:给父元素添加 text-align: center;(文本 / 图片)

块级元素:

  确定宽度:margin: 0 auto;

  不确定宽度: 1. 把块级元素变成行内元素, display:inline-block; text-align:center;

         2. 给父元素设置浮动和相对定位及left: 50%; 子元素相对定位及left: 50%; 

         3. table{margin: 0 auto;}

垂直居中

父级高度确定

  单行文本:line-height: height;

  多行文本、图片: 1. vertical-align:middle; (只有父级元素为td/th,或者图片) <IE8+>

          2. father{display:table;} child{display:table-cell;vertical-align:middle} 用table-cell 来激活 vertical-align;eg:多行文字的水平垂直居中

多行文字的水平垂直居中

<style>
        .multiLineWordContainer{
            display: table-cell;
            border: 4px solid #beceeb;
            height: 300px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
  <div class="multiLineWordContainer">
        这里的文字用来做多行文字垂直居中对齐的测试。<br>
        这是第二行文字,您还可以再添加一行文字做测试!<br>
        这是第3行文字,您还可以再添加一行文字做测试!<br>
        这是第4行文字,您还可以再添加一行文字做测试!
  </div>
</body>

 

大小不固定的图片

<style>
        ul,li{
            list-style: none;
            margin:0;
            padding:0;
        }
        ul{
            margin-top:10px;
        }
        li{
            height:128px;
            width:150px;
            padding:13px 0;
            float:left;
            margin-right:10px;
            border:1px solid #beceeb;
            text-align:center;
            font-size:0;
        }
//方式一
        .invisibilityImg{
            height:100%;
            width:1px;
            vertical-align:middle;
        }
        .showImg{
            vertical-align:middle;
        }
//方式二
        .ulImage li{
            height: 150px;
            text-align: center;
            line-height: 150px;
        }
        .ulImage li img{
            vertical-align:middle;
        }
    </style>
</head>
<body>
<ul class="imgContainer">
    <li>
        <img class="showImg" src="image/mm1.jpg" />
        <img class="invisibilityImg" src="image/pixel.gif"/>
    </li>
    <li>
        <img class="showImg" src="image/mm2.jpg" />
        <img class="invisibilityImg" src="image/pixel.gif"/>
    </li>
    <li>
        <img class="showImg" src="image/mm3.jpg" />
        <img class="invisibilityImg" src="image/pixel.gif"/>
    </li>
</ul>

<ul class="ulImage">
    <li><img src="image/mm1.jpg" /></li>
    <li><img src="image/mm2.jpg" /></li>
    <li><img src="image/mm3.jpg" /></li>
</ul>
</body>
</html>

 

参照:http://www.zhangxinxu.com/wordpress/?p=61

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!