在网页布局中，我们往往会遇到下图所示的场景，让小图标和文字对齐

　　

　　可能有的小伙伴会说，这个简单，直接给小图标设置左浮动来实现。

　　这样做是可以的，但不推荐，毕竟浮动是会影响布局的，能少用还是少用。

　　以前遇到这种场景，其实挺头疼的，我是直接给小图标设置相对定位，然后调整top值。好像找不到更好的办法，也就没去管了。

　　直到后来偶然看了张鑫旭大神关于vertical-align属性的视频讲解，感觉发现了新大陆。

　　

　　下面总结了2种方法，只需要一句代码即可解决（强烈推荐第二种）

　　①：给小图标加上　vertical-align:middle;

　　以前因为IE6,7对该属性不支持，所以还要使用csshack，

　　现在主流浏览器都已经很好的支持了，而且谁还管万恶的低版本IE浏览器兼容喔（eat shift）

　　

　　②：给小图标加上　vertical-align:-2px;（这里的负值根据你的情况自行设置，这种方法没有兼容性问题）

　　注：如果当你遇到第一种方法用了没有效果或者用着很不开心的时候，强烈推荐使用第二种方法

　　

　　顺便总结了一些其它小技巧，害怕自己以后忘记，也希望帮到有需要的小伙伴

　　问题1：怎么让定位元素垂直居中的三种方法？

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div01 {

                width:200px;

                height:200px;

                background-color:#6699FF;

                position:absolute;

                margin: auto;

                top: 0;

                right: 0;

                bottom: 0;

                left: 0;

            }

        </style>

    </head>

    <body>

            <div class="div01"></div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div01 {

                width:200px;

                height:200px;

                background-color:#6699FF;

                position:absolute;

                top:50%;

                left:50%;

                margin-top: -100px;

                margin-left: -100px;

            }

        </style>

    </head>

    <body>

            <div class="div01"></div>

    </body>

</html>

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>定位元素居中</title>

        <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <style type="text/css">

    .div{

        width: 500px;

        height: 300px;

        background-color: red;

        position: absolute;

        left: 50%;

        top:50%;

        margin: -150px 0px 0px -250px;

    }

    </style>

    <body>

            <div class="div"></div>

    </body>

</html>

　　注： 上面三种都是在知道具体宽高的情况下，如果不知道元素宽高怎么让其垂直居中呢？（利用transform属性）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style type="text/css">

        img {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }

    </style>

    <body>

        <img src="img/1.jpg" />

    </body>

</html>

　　问题2：怎么让文字垂直居中？

　　(给一个空标签，然后给空标签设置display:inline-block;height:100%;width:1px;vertical-align:middle;）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>文字垂直居中</title>

        <style type="text/css">

            .test {

                width: 500px;

                padding: 10px;

                border: 1px solid red;

                text-align: center;

            }

            .test div {

                display: inline-block;

                padding: 3px;

                width: 200px;

                border: 1px solid #CCCCCC;

            }

            .test span {

                display: inline-block;

                height: 100%;

                width: 1px;

                vertical-align: middle;

            }

        </style>

    </head>

    <body>

        <!--用一个高度100% 宽1px display: inline-block 的空标签 然后使用vertical-align: middle; 就可以在高度不固定的情况下 自动居中-->

        <div class="test">

            <div>

                青青园中葵，朝露待日晞。 阳春布德泽，万物生光辉。 常恐秋节至，焜黄华叶衰。 百川东到海，何时复西归？ 少壮不努力，老大徒伤悲。青青园中葵，朝露待日晞。 阳春布德泽，万物生光辉。 常恐秋节至，焜黄华叶衰。 百川东到海，何时复西归？ 少壮不努力，老大徒伤悲。

            </div>

            <span></span>

        </div>

    </body>

</html>

　　问题3：怎么让一个块元素水平居中，块元素里的文字也水平居中？

　　给这个块元素设置一个固定宽度，然后加上margin:0 auto;　在给里面的元素设置text-align:center;

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .main {

                width: 400px;

                margin: 0 auto;

                background-color: chocolate;

            }

            .main p {

                color: #fff;

                text-align: center;

            }

        </style>

    </head>

    <body>

        <div class="main">

            <p>珍爱生命，远离IE</p>

        </div>

    </body>

</html>

　　补充：最简单的实现左边定宽，右边自适应布局（给左边设置固定宽度，然后加浮动；右边设置宽度百分百，不加浮动）

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            * {

                padding: 0;

                margin: 0;

                color: #fff;

                font-size: 30px;

                font-weight: bold;

                text-align: center;

                box-sizing: border-box;

            }

            aside {

                float: left;

                width: 200px;

                height: 200px;

                line-height: 200px;

                background: #5A6A94;

            }

            section {

                width: 100%;

                height: 200px;

                line-height: 200px;

                background: #BE4F4F;

            }

        </style>

    </head>

    <body>

        <!-- 左边定宽 -->

        <aside class="left">Left</aside>

        <!-- 右边自适应 -->

        <section class="right">Right</section>

    </body>

</html>

　　

css垂直居中方法总结的更多相关文章

  1. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  2. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  3. css垂直居中方法（四）

    第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...

  4. css 垂直居中方法总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...

  5. css 垂直居中方法汇总

    查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...

  6. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

  7. [css] 垂直居中方法

    原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...

  8. css垂直居中方法（二）

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

  9. css垂直居中方法（一）

    第一种方法:首先用margin:0 auto实现水平居中,然后设置position:relative,设置top为50%(父元素高度的50%),然后设置margin-top:-150px(设置负值是因 ...

随机推荐

  1. Golang 嵌套map赋值办法

    http://my.oschina.net/sol/blog/159060 m := map[string]map[string]string{} mm, ok := m["kkk" ...

  2. 关于new Date()的日期格式处理

    new Date()基本方法: var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整 ...

  3. TestNG entryset的用法及遍历map的用法

    以下内容引自 http://blog.csdn.net/bestone0213/article/details/47904107  (注: 该 url不是原出处.其博主注明转载,但未注明转自何处) k ...

  4. BDD测试之selenium控制滚动条

    一.对于页面存在滚动条,可以通过插入JS控制滚动条(最常用的方法) (1)将滚动条移动到指定坐标位置处 ((JavascriptExecutor) driver).executeScript(&quo ...

  5. Grafana简单使用

    下载安装 Grafana也是用GO语言写的,无任何依赖,安装非常简单. 启动 sudo service grafana-server start 运行 直接访问:http://your_ip:3000 ...

  6. 在 Java 中运用动态挂载实现 Bug 的热修复

    大多数 JVM 具备 Java 的 HotSwap 特性,大部分开发者认为它仅仅是一个调试工具.利用这一特性,有可能在不重启 Java 进程条件下,改变 Java 方法的实现.典型的例子是使用 IDE ...

  7. 【prufer编码+组合数学】BZOJ1005 [HNOI2008]明明的烦恼

    Description 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为1到N的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Solution 这 ...

  8. BZOJ_2142_礼物_扩展lucas+组合数取模+CRT

    BZOJ_2142_礼物_扩展lucas+组合数取模 Description 一年一度的圣诞节快要来到了.每年的圣诞节小E都会收到许多礼物,当然他也会送出许多礼物.不同的人物在小E 心目中的重要性不同 ...

  9. 设置yum源:

    1.企业    阿里开源镜像站:   http://mirrors.aliyun.com/ 搜狐开源镜像站: http://mirrors.sohu.com/ 网易开源镜像站: http://mirr ...

  10. Java IO--字符流--BufferedReader和BufferedWriter

    从昨天开始没事情干时,决定梳理梳理Java IO流,因为觉得太混乱这个东西,妈的,咋就这么多类型,想累死谁啊,这里并不是埋怨创造者,而是气自己看着看着老跑偏,实在看不进去,太多了,想睡觉,所以现在决定 ...