文字和圖片垂直居中

 

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