首页 > 代码库 > 垂直居中

垂直居中

2024-08-18 21:25:33   223人阅读

一，内联元素的垂直居中之图片

　　查了多方资料，最终觉得淘宝工程师的做法更能满足我的需求，于是把它记录在此：

　　铺垫：vertical-align 这个属性的特点，它是相对兄弟级(line-height)来定位的，并且它仅对行内元素有效；

　　　　　display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li{padding:0;margin:0;}
        li{list-style:none;}
        img{max-width:100px;max-height:110px;min-width:50px;min-height:50px;}/*自定义最大和最小宽高来控制图片*/
        .a li{float:left; margin-right:13px;}
        .a li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:14px; text-align:center; vertical-align:middle;}
        .a li div img{vertical-align:middle;}
    </style>
</head>
<body>
<ul class="a">
    <li>
        <div><img src="1.jpg" /></div>
    </li>
    <li>
        <div><img src="a.jpg" /></div>
    </li>
    <li>
        <div><img src="aa.jpg" /></div>
    </li>
</ul>
</body>
</html>

技术分享

总结：可用于多图片上传，既不影响布局，有不用担心图片等宽高比 。

二，内联元素垂直居中之文字（非p标签）：

　　注意：里面用来定位来做水平居中：因为.par用了display:table-cell属性，所以margin就没有用了，故而用padding和定位来达到满意位置。

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{position:relative;}
        .par{position:absolute;left:50%;margin-left:-169px;border:4px solid #beceeb;display:table-cell; vertical-align:middle;padding:20px;}
        .par span{display:inline-block;vertical-align:middle;line-height:100px;border:1px solid red;}
    </style>
</head>
<body>
<div class="a">
    <div class="par">
        <span>浪费的肌肤雷电交加了房间封疆大吏风景</span><br>
        <span>浪费的肌肤雷电交加了房间封疆大吏风景</span><br>
        <span>浪费的肌肤雷电交加了房间封疆大吏风景</span>
    </div>
</div>

</body>
</html>

三，如果是p段落标签，直接用line-height，就能让文字很好的上下居中。

四，少量单纯的父子集的居中，简单来说就是用定位了。

总结：需求改变方法，秉承高效，简洁，优化，兼容，选择合适的属性。

参考：

http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html#zhangxinxu

http://www.zhangxinxu.com/wordpress/2010/10/我所知道的几种displaytable-cell的应用/

http://www.cnblogs.com/zhangxiongcn/p/6028633.html

 

垂直居中


联系
我们