CSS居中實(shí)例之大小不固定的圖片居中方法
發(fā)布時(shí)間：2017-12-20 16:29:30 作者：ken_ding 
我要評(píng)論
我要評(píng)論本篇文章主要介紹了CSS居中實(shí)例之大小不固定的圖片居中方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了CSS居中實(shí)例之大小不固定的圖片居中方法，分享給大家，具體如下：
1.利用table-cell實(shí)現(xiàn)垂直居中
<div class="box1">
[站外圖片上傳中……(5)]
</div>
div{
width: 500px;
height: 500px;
background: #ccc;
}
.box1{
text-align:center;
display: table-cell;
vertical-align: middle;
/* font-size: 118px; */
}
img{
vertical-align: middle;
}
利用父元素為display:table-cell類(lèi)型實(shí)現(xiàn)垂直居中，table在ie8+的瀏覽器中自帶的垂直居中的屬性。
注意：img{vertical-align: middle;}只是為了消除display:inline-block類(lèi)型的基線對(duì)齊問(wèn)題。
2.多行文本的垂直居中方法
有時(shí)可能我們會(huì)遇到需要多行文本垂直居中的一些情況，但是做起來(lái)有時(shí)有些麻煩，需要我們換個(gè)思路去實(shí)現(xiàn)。
<div class="box3">
<span>你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)你好，我是測(cè)試數(shù)據(jù)</span>
</div>
div{
width: 500px;
height: 500px;
background: #ccc;
}
.box3{
display: table-cell;
vertical-align: middle;
}
span{
display: inline-block;
vertical-align: middle;
}
將內(nèi)部的文本用span標(biāo)簽（其他標(biāo)簽也可以）包裹起來(lái)，把span標(biāo)簽設(shè)為inline-block,然后當(dāng)圖片的垂直居中處理(ie8+)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 這篇文章主要介紹了通過(guò)CSS設(shè)置未知大小圖片在已知大小容器水平垂直居中，需要的朋友可以參考下2014-05-22