文字和图片垂直居中

 

1、文字垂直居中

习惯性的咱们想对文字进行垂直居中，首先想到的是设置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失效，正研究解决方法。

 2、图片垂直居中

来先看看效果

效果仍是挺满意的（效果为火狐与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