1024精品久久久久久久久,欧洲另类一二三四区,尤物九九久久国产精品的特点

本文綜述

想必寫(xiě)css的都知道如何讓單行文字在高度固定的容器內(nèi)垂直居中，但是您知道或者想過(guò)讓行數(shù)不固定的文字在高度固定的容器內(nèi)垂直居中呢？本文將會(huì)告訴你如何實(shí)現(xiàn)多行文字的垂直居中顯示。
關(guān)于圖片垂直居中顯示，想必很多寫(xiě)css的人都研究過(guò)，或者說(shuō)是搜尋過(guò)方法。淘寶團(tuán)隊(duì)似乎提供了一種不錯(cuò)的方法，用font-size解決IE下垂直居中的問(wèn)題，是個(gè)好方法嗎？是的，方法是不錯(cuò)，可是問(wèn)題也很多：不支持img外標(biāo)簽的浮動(dòng)，致使多圖片排列時(shí)需添加額外標(biāo)簽；需要記住一些比例參數(shù)，上手較難；原理艱深，兼容性不穩(wěn)定等。但是在我看來(lái)，這個(gè)方法不足夠好！本文將提供兩種更為新穎的方法，代碼簡(jiǎn)潔，原理簡(jiǎn) 單，上手容易，兼容性強(qiáng)，出錯(cuò)率低的方法。 inline-block裸標(biāo)簽對(duì)齊法，以及透明圖片拉伸對(duì)齊法。
css是如此的精深，

單行文本垂直居中對(duì)齊-鑫空間-鑫生活

② 多行文字
如何實(shí)現(xiàn)父容器高度固定，文字可能一行，兩行或更多行的垂直居中對(duì)齊呢？
實(shí)現(xiàn)的關(guān)鍵是把文字當(dāng)圖片處理。用一個(gè)span標(biāo)簽將所有的文字封裝起來(lái)，設(shè)置文字與圖片相同的display屬性（inline-block屬性），然后用處理圖片垂直居中的方式處理文字的垂直居中即可。
核心css代碼如下，
外部div標(biāo)簽：

      div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

內(nèi)部span標(biāo)簽：

      span{display:inline-block; font-size:0.1em; vertical-align:middle;}

下面這張是實(shí)例演示頁(yè)面的效果截圖：

行數(shù)不固定文字垂直居中對(duì)齊

有幾點(diǎn)簡(jiǎn)要說(shuō)明：
1.此例子用em做單位，如果您對(duì)em單位了解不夠，把握不來(lái)的話，可以使用px做單位，值要換；
2.外部div不能使用浮動(dòng)；
3.外部div高度和文字大小比例1.14為宜；
4.內(nèi)部標(biāo)簽的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己試了一下，高度比字體1.5左右的樣子；
5.系統(tǒng)原因，我沒(méi)能夠在IE8下測(cè)試。

實(shí)現(xiàn)的最終效果和JavaScript演示，您可以狠狠地點(diǎn)擊這里去看看。

二、大小不固定，圖片的水平垂直居中

① 透明gif圖片+背景定位的方法
這里利用了background-position:center實(shí)現(xiàn)圖片居中顯示。這是個(gè)很實(shí)用也是很聰明的辦法，對(duì)于維護(hù)控制成本都很不錯(cuò)。微軟必應(yīng)圖片搜索的圖片排列就是使用的這種方法。
方法的原理很簡(jiǎn)單，使用一個(gè)透明的gif圖片做覆蓋層，高寬拉伸至所需要的大小，然后給這個(gè)gif圖片一個(gè)background- position:center center的屬性。而background-image建議寫(xiě)在頁(yè)面上，因?yàn)閷?shí)際項(xiàng)目中，這肯定是個(gè)動(dòng)態(tài)的URL地址，css文件似乎不支持動(dòng)態(tài)URL 地址。下面就是實(shí)例演示頁(yè)面的效果截圖。

透明圖片和背景定位實(shí)現(xiàn)圖片水平垂直居中

核心HTML代碼為：

      <img src="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);" />

其中此img標(biāo)簽已經(jīng)設(shè)置了高寬和背景居中定位的屬性。具體實(shí)現(xiàn)可以可以狠狠地點(diǎn)擊這里進(jìn)行參照。

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

這個(gè)方法可以說(shuō)就是本文綜述部分提到的淘寶團(tuán)隊(duì)想出的圖片垂直居中的方法。但是本文展示的這個(gè)方法的css代碼又不是淘寶工程師們的原版代碼，我對(duì)其做了一定的修改，把里面沒(méi)有用可以剔除的hack都去掉了。

css代碼部分：
img外部div標(biāo)簽：

      div {display:table-cell;
      
         width:1em; height:1em; font-size:144px;
      
       width:144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}/*這里的大小是根據(jù)高寬上限128像素圖片設(shè)置的*/

img標(biāo)簽：

      img{vertical-align:middle;}

需要說(shuō)明的：
1.原版的代碼中有兩個(gè)hack，一個(gè)是針對(duì)文字大小的，另外一個(gè)是針對(duì)block屬性的；后經(jīng)過(guò)我測(cè)試推敲后證實(shí)這兩個(gè)hack都是多余的，而*display:block更是多余，因?yàn)镮E6,IE7根本就不認(rèn)識(shí)display:table-cell是誰(shuí)！
2.這個(gè)通過(guò)文字大小控制IE下圖片垂直居中是個(gè)很不錯(cuò)的方法，要比使用position:relative這類高消耗的css方法要好多了。但是這個(gè)方法不足之處在于：不支持img外標(biāo)簽的浮動(dòng)，所以當(dāng)多圖片顯示時(shí)需要再在外面嵌套一層標(biāo)簽——資源消耗多了！
3.高度：文字大小=1.14，這個(gè)比例我一直記著，但是后來(lái)我將這個(gè)比例的概念淡化了，原因在于多次遇到其他比例實(shí)現(xiàn)效果的情況。例如上面，就是1:1實(shí)現(xiàn)的。

這里附上效果截圖（取自IE6瀏覽器）：

table-cell和文字大小實(shí)現(xiàn)的圖片垂直居中顯示

圖片和文字比不上直接的效果顯示，所以建議您狠狠地點(diǎn)擊這里。

③ display:inline-block和文字大小控制居中
此方法的靈感來(lái)自于Google picasa相冊(cè)的圖片顯示，代碼相當(dāng)簡(jiǎn)潔，是個(gè)成本很低，效果驚人的方法。適用于多圖顯示的情況。基本上用裸標(biāo)簽就實(shí)現(xiàn)了想要達(dá)到的效果。一般而言，圖片陣列排列顯示的時(shí)候，外面都有一個(gè)a標(biāo)簽的，起到鏈接的作用。而本處的方法就只要這一個(gè)a標(biāo)簽就足以實(shí)現(xiàn)圖片垂直且居中的顯示效果。其關(guān)鍵是將a標(biāo)簽?zāi)?認(rèn)的inline屬性設(shè)置為inline-block屬性，這樣a標(biāo)簽既支持寬度，又支持vertical-align:middle，配合img的 vertical-align:middle就可以實(shí)現(xiàn)圖片的水平垂直居中顯示了。
css代碼：
a標(biāo)簽：

      a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}

img標(biāo)簽：

      img{vertical-align:middle;}

就這么簡(jiǎn)單，就實(shí)現(xiàn)了圖片的垂直居中效果。下截圖為證：

最精簡(jiǎn)的實(shí)現(xiàn)圖片水平垂直居中顯示的方法

另外補(bǔ)充說(shuō)明的：img外的標(biāo)簽需是a標(biāo)簽或span這類inline屬性的標(biāo)簽，div標(biāo)簽也可以，但是css代碼多些: display:inline-block;*display:inline; zoom:1; IE下要先變成inline屬性，再轉(zhuǎn)變成類似于inline-block的屬性，原因講起來(lái)又是一篇長(zhǎng)長(zhǎng)的文章，放著。

建議您狠狠地點(diǎn)擊這里直接查看源代碼

④ 透明圖片拉伸對(duì)齊實(shí)現(xiàn)垂直居中顯示
這個(gè)方法是 <li> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /><img src="../image/pixel.gif" /> </li>

css部分：

      li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center;
      
         font-size:0;
      
      }

      
        li .alpha_img{height:100%; width:1px; vertical-align:middle;}
      
      
li .alpha_img{height:100%; width:0; vertical-align:middle;}
li .show_img{vertical-align:middle;}

其實(shí)，只要有上面綠色部分的css代碼就足夠了。
簡(jiǎn)單的超乎想象。

要顯示的圖片后面跟了一個(gè)高度撐滿容器， ~~只有1px寬~~ ，寬度為0即可，透明的圖片。這兩個(gè)圖片分別vertical-align:middle，就實(shí)現(xiàn)了要顯示的圖片與這個(gè)拉伸的透明圖片的居中對(duì)齊了，由于透明圖片是透明的，不可見(jiàn)的， ~~寬度也只有1像素~~ 寬度也為0，所以看上去就是要顯示的圖片相對(duì)于容器垂直居中了。

另外，其實(shí)這里不一定是透明的圖片，使用任意的圖片都可以，所以您其實(shí)說(shuō)不定可以減少一次http請(qǐng)求，使用任意的圖片將其拉伸至高度為容器高， ~~寬度1像素~~ 寬度0就可以了。

甚至，使用span標(biāo)簽，div標(biāo)簽也可以實(shí)現(xiàn)同樣的效果。只要將span標(biāo)簽或div標(biāo)簽轉(zhuǎn)換成inline-block屬性或類似于inline-block屬性就可以了。
我個(gè)人更推薦使用行內(nèi)元素，例如span，i標(biāo)簽等，只要應(yīng)用類似下面的CSS：

        span{display:inline-block; height:100%; width:0; vertical-align:middle;}

相比圖片而言，多了個(gè)display:inline-block; 但是會(huì)少一次鏈接請(qǐng)求。效果圖和上面的一樣的，完美的水平垂直居中。原理也與圖片一樣，相信很容易理解的。

再提供一下實(shí)例頁(yè)面的鏈接，狠狠地點(diǎn)擊這里，實(shí)例頁(yè)面的最后一種方法向您展示了這種新穎的圖片垂直居中的方法。

最后，說(shuō)句實(shí)在話，我知道這應(yīng)該不算什么新穎的方法，在我之前想到這種方法的人肯定不在少數(shù)，但是留跡于網(wǎng)上的卻沒(méi)有，我是沒(méi)有發(fā)現(xiàn)過(guò)。我不清楚是這些大牛的公司要求技術(shù)保密，還是自身不愿分享研究成果。我相信不是這樣的，主要還是他們很忙碌，沒(méi)有時(shí)間寫(xiě)這些東西。像我這樣，”閑暇”的很，花十幾個(gè) 小時(shí)寫(xiě)一篇文章的估計(jì)不多，呵呵。

補(bǔ)充于2009-11-03 15:32
正如我經(jīng)常掛在嘴邊的，css博大精深，你需要花費(fèi)精力去觀察它，研究它。這里，我再提供一種我剛剛試驗(yàn)出來(lái)的一種新方法，實(shí)現(xiàn)大小不固定的圖片水平垂直居中，綜合來(lái)講，比上面所有提供的方法還要優(yōu)秀，且沒(méi)有hack，兼容性上佳（支持IE6、IE7、Firefox、chrome、Safari瀏覽器 -IE8未測(cè)（ 補(bǔ)充： 我后來(lái)又測(cè)試了一下，結(jié)果在IE8瀏覽器和Opera瀏覽器下是不垂直居中的，所有此方法還是有待商榷的）。下為在IE7下的效果截圖：

此方法原理是，在IE下使用font-size使圖片垂直居中顯示，F(xiàn)irefox，chrome等現(xiàn)代瀏覽器使用line-height配合img本身的vertical-align屬性使垂直居中顯示，由于兩者不沖突，所以沒(méi)有hack就實(shí)現(xiàn)的效果。css代碼簡(jiǎn)潔明了，關(guān)鍵是HTML代碼非常清晰，一層外標(biāo)簽，里面就是img標(biāo)簽，我想很難再找出比這個(gè)方法更出色的讓圖片水平垂直居中的方法了。好吧，其實(shí)這個(gè)方法是有一點(diǎn)不完美的，就是opera瀏覽器下圖片無(wú)法垂直居中顯示，幸好國(guó)內(nèi)而言，使用opera瀏覽器的比例很低，所以綜合來(lái)講這個(gè)方法是個(gè)非常優(yōu)秀的圖片水平垂直居中的方法。

以下為css代碼部分：

        
          .zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; font-size:125px;}
.zxx_ul_image li img{vertical-align:middle;}
        
        

.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}

可以看到，代碼非常簡(jiǎn)潔易懂，HTML部分代碼就不上了，您可以單擊下面的demo，里面有HTML代碼的展示以及效果的預(yù)覽。

建議您狠狠地單擊這里：獨(dú)立的demo實(shí)例頁(yè)面

來(lái)自張?chǎng)涡?鑫空間-鑫生活 [ http://www.zhangxinxu.com ]
原文地址： http://www.zhangxinxu.com/wordpress/?p=61

或者：

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>可能居中了 汗！</title>
<style>
*{list-style: none;}
.out{width:600px;height:300px;border:2px solid;margin:100px auto;display: table-cell;-vertical-align:middle;text-align: center;line-height: 300px;font-size: 0;}
strong{color:red;cursor:pointer;}
.in{display: inline-block;line-height:16px;vertical-align:middle;font-size: 16px;}
</style>
</head>
<body>

<div class="out">
  <div class="in">
  多行文字垂直居中對(duì)齊的測(cè)試
    <strong>添加</strong>
    <br>多行文字垂直居中對(duì)齊的測(cè)試<br>xxXXXXXXxx<br>這里<br>這里
  </div>XXX    

  </div>
<script>
document.querySelector(".out").onclick=function()
{

  document.querySelector(".in").innerHTML=document.querySelector(".in").innerHTML+'添加內(nèi)容！！'+'<br>'; 
}
</script>
  
</body>
</html>

http://jsbin.com/cayirogera/6/edit?html,css,js,output

justcode.ikeepstudying.com

大小不固定的圖片和多行文字的垂直水平居中

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利