文字和图片垂直居中

 

一、文字垂直居中

习惯性的我们想对文字进行垂直居中，首先想到的是设置line-height与height相等

<div style="width:300px;height:150px;line-height:150px;border:1px solid red">
      我是垂直居中位置，我就这么帅！
</div>

效果如图：

但是如果出现多行文字效果就...

<div style="width:300px;height:150px;line-height:150px;border:1px solid red">
      我是垂直居中多行文字，我就这么帅！
      我是垂直居中多行文字，我就这么帅！
</div>

立刻就不帅了！！

然后就想到了控制垂直的属性vertical-align:middle;

但是加上去之后好像一点效果也没有

vertical-align:middle直接用是无效的，当它放在table里面的tr效果就实现了

基于这个原理，只要把div的display属性改成table-cell就可以了

<style>
    .out_box{
        display:table-cell; 
        width:550px; 
        height:1em; 
        padding:0 0.1em; 
        border:4px solid red; 
        color:#069; 
        font-size:10em; 
        vertical-align:middle;
    }
    .inner_word{
        display:inline-block; 
        font-size:0.1em; 
    }
</style>
<div class="out_box">
    <span class="inner_word">我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字</span>
</div>

效果如下图

这里要说一下的是字体大小用了em，out_box设置了font-size:10em; height的高度就字体大小的1.14倍

2016.1.12

问题：当使用float后垂直居中效果失效，即vertical-align:middle失效，正研究解决方法。

 二、图片垂直居中

来先看看效果

效果还是挺满意的（效果为火狐与ie10）

<style>
        .out_box{
            display: table-cell;
            width:550px; 
            height:300px; 
            border:4px solid #beceeb; 
            color:#069; 
            vertical-align: middle;
        }
        .inner_word{
            width:100px;
            display:block;
            margin: 0 auto;
            border:1px solid black;
        }
    </style>
     <div class="out_box">
        <img src='img/male.png' class="inner_word">
     </div>

上面的效果，其实也没有什么好说的，水平居中用了margin：0 auto;稍微要注意一下的是img默认的display为inline-block;所以这里要设置一下display：block;

今天刚好看到另外一种很实用的居中方法：

① 透明gif图片+背景定位

效果：

<style>
        .center_box li{
            width:1em; 
            height:1em; 
            padding:0.1em; 
            margin:0 0.1em 0 0; 
            font-size:128px; 
            float:left; 
            border:1px solid #beceeb;
            list-style: none;
        }
        .center_box li img{
            display:block; 
            width:100%; 
            height:100%; 
            background-repeat:no-repeat; 
            background-position:center;
        }
       <style>
       <ul class="center_box">
         <li>
          <img src="./img/pixel.gif" style="background-image:url(img/male.png);border:1px solid red" />
        </li>
        <li>
          <img src="./img/pixel.gif" style="background-image:url(img/male.png);border:1px solid black" />
        </li>
        <li>
          <img src="./img/pixel.gif" style="background-image:url(img/male.png);" />
        </li>
      </ul>

这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法，对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。

方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL地址。

② display:table-cell和文字大小控制居中

作者原版的代码

 <style>
    .zxx_align_box_4 li{
            float:left; 
            margin-right:13px;
            list-style:none;
            border:1px solid red;
            padding:5px;
        }
    .zxx_align_box_4 li div{
        display:table-cell; 
        width:144px; 
        height:144px; 
        border:1px solid #beceeb; 
        font-size:118px; 
        text-align:center; 
        vertical-align:middle;
    }
    .zxx_align_box_4 li div img{
        vertical-align:middle;
    }
    </style>
 <ul class="zxx_align_box_4 fix">
    <li>
        <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div>
    </li>
</ul>

效果如图：

不知道为什么没有居中，测试了几乎所有浏览器，效果都一样，然后决定还是换回上面用的margin：0 auto 来控制

  .zxx_align_box_4 li{
            float:left; 
            margin-right:13px;
            list-style:none;
            border:1px solid red;
            padding:5px;
        }
    .zxx_align_box_4 li div{
        display:table-cell; 
        width:144px; 
        height:144px; 
        border:1px solid #beceeb; 
        font-size:118px; 
        vertical-align:middle;
    }
    .zxx_align_box_4 li div img{
        display:block;
        margin:0 auto;
    }

效果出来了

③ display:inline-block和文字大小控制居中

原作者的这种方法，利用vertical-align:middle，垂直居中，我就是实现不了（我做出来的效果都是如上）

④ 使用空白图片实现垂直对齐

.zxx_align_box_6 li{
        height:128px; 
        width:150px; 
        padding:13px 0; 
        float:left; 
        margin-right:10px; 
        border:1px solid #beceeb; 
        text-align:center; 
        font-size:0;
    }
    .zxx_align_box_6 li .alpha_img{
        height:100%; width:1px; 
        vertical-align:middle;
    }
    .zxx_align_box_6 li .show_img{
        vertical-align:middle;
    }
 <ul class="zxx_align_box_6 fix">
    <li>
        <img class="show_img" src="./img/male.png" />
        <img class="alpha_img" src="../image/pixel.gif" />
    </li>
</ul>

效果

一句话，将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐。

其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其性质类似于空格，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；而这里将这个看不见的文字空间实例成一张透明的gif图片，高度可以轻松设置为外部标签的高度，然后通过vertical-align:middle对齐，就实现效果了，在各个浏览器下都是一样的表现，不需要担心什么兼容性的问题。而且代码很简单，很易懂，想出错都难！

 

原作者链接：http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html