建站
咨詢
售后
建站咨詢
新聞中心
圖片的居中顯示 css 有很多方法，但在很多情況下有的方法無(wú)效，這是件很頭疼的事情，比如
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)絡(luò)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、北海網(wǎng)站維護(hù)、網(wǎng)站推廣。
一般設(shè)置圖片屬性
?
text-align:center
?
水平居中，但這個(gè)方法經(jīng)常無(wú)效，
很多前端工程師都有研究過(guò)或者說(shuō)是搜索過(guò)
CSS
圖片居中方法吧。
但其實(shí) CSS 圖片居中有多種不同的情況，也有多種不同的解決方法，具體方法如下所示：
圖片居中又分為水平居中和垂直居中
提示：在你開(kāi)始閱讀以下內(nèi)容之前，你可以先了解CSS圖片的基礎(chǔ)內(nèi)容。
一、水平居中：
1、單獨(dú)文字垂直居中我們只需要設(shè)置 CSS 樣式line-height屬性即可。
2、文字與圖片同排，在設(shè)置div高度同時(shí)再對(duì)此 CSS 樣式的圖片“img”樣式設(shè)置?vertical-align:middle?垂直居中屬性，如:? img{vertical-align:middle;}? 。
3 不確定寬度的塊級(jí)元素設(shè)置水平居中的方法
（1）是使用? table? 作為容器的方法來(lái)實(shí)現(xiàn)。當(dāng)然不大推薦使用這種方法，因?yàn)樘砑恿藷o(wú)意義的標(biāo)簽。這里就稍微介紹一下吧。?Table? 標(biāo)簽本身并不是塊級(jí)元素，當(dāng)我們不設(shè)置?table?的寬度的話，他里面的寬度是由他內(nèi)部元素的寬度撐起來(lái)的。但即使我們沒(méi)有設(shè)置?table?的寬度，直接設(shè)置?table?的外邊距?margin：0 auto;?就可以實(shí)現(xiàn)水平居中了!這樣我們就可以通過(guò)設(shè)置?table?水平居中，間接使里面的內(nèi)容居中。
（2）相對(duì)于用?table?的方法的好處是不用增加無(wú)語(yǔ)義標(biāo)簽，簡(jiǎn)化標(biāo)簽嵌套深度。這個(gè)思路是這樣的，通過(guò)改變塊級(jí)元素的?display?屬性值為?inline?類型，然后設(shè)置?text-align:center?來(lái)實(shí)現(xiàn)居中。這種方法也有一定不妥之處就是把塊級(jí)元素改為行內(nèi)元素后，行內(nèi)元素比塊元素少了一些功能。比如說(shuō)設(shè)定長(zhǎng)寬值等，在項(xiàng)目運(yùn)用中可能會(huì)有一些限制，大家可以自行選擇。
（3）通過(guò)給父元素設(shè)置浮動(dòng)?float?，再設(shè)置父元素的?position?屬性為?relative?和?left：50%;?子元素設(shè)置?position：relative?和?left：-50%?來(lái)實(shí)現(xiàn)水平居中。這個(gè)好處是可以保留塊級(jí)元素仍然是以?display：block?的形式顯示，不會(huì)添加無(wú)意義的標(biāo)簽，不添加嵌套深度。確點(diǎn)是設(shè)置了?position：relative;?帶來(lái)了一些副作用。下面是第三種方法的實(shí)例代碼，放到?body?標(biāo)簽里面就可以了。
二、垂直居中：
對(duì)這個(gè)CSS居中問(wèn)題，我們可以使用設(shè)置背景圖片的方法。舉例：
body {BACKGROUND: url(”圖片文件”) #FFF no-repeat center;}
關(guān)鍵就在于這個(gè)?center?屬性，它表示讓該背景圖片在容器中居中。你也可以把?center?換成?top left?或者直接寫(xiě)上數(shù)字來(lái)調(diào)整它的位置。
方法一:
實(shí)例
div {
width:500px;
height:500px;
border:1px solid #666;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;}
嘗試一下 ?
方法二:
實(shí)例
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
嘗試一下 ?
方法三:
實(shí)例
img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle； }
嘗試一下 ?
方法四:
實(shí)例
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #666;
height:500px;
background:url("/statics/images/w3c/intro.png") center no-repeat;}
嘗試一下 ?
三、css圖片居中用text-align:center無(wú)效怎么回事？
實(shí)例
div{
border:1px solid red;
margin:20px;
text-align:center;
}
嘗試一下 ?
四、如何讓圖片在DIV中水平和垂直兩個(gè)方向都居中？
方法一：
思路：利用?text-align?屬性將圖片水平居中，然后設(shè)置?padding-top?的值使其垂直居中。
結(jié)構(gòu)如下：
CSS樣式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
運(yùn)行結(jié)果如下：
釋義：
圖片的尺寸為150x100px，DIV的大小為300x200px；
background-color:#CCC; border:#000 1px solid;為DIV加個(gè)邊框和背景色，便于觀察效果。
?text-align:center?,實(shí)現(xiàn)圖片的水平居中；?padding-top:50px?，50px這個(gè)數(shù)值是經(jīng)過(guò)計(jì)算得到的，?padding-top?的值具體算法如下：（DIV的高度 – 圖片的高度）/2，但這里要注意，根據(jù)盒模型原理，我們還要將DIV原來(lái)的高度200減去?padding-top?的值，這樣顯示的才是正確的，否則DIV會(huì)變高。
方法二：
思路：只用?padding?屬性，通過(guò)計(jì)算求得居中
結(jié)構(gòu)代碼同上；
CSS樣式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
備注：這里DIV的寬高計(jì)算都遵循盒模型原理，計(jì)算方法同上。
方法三：
思路：利用圖片的?margin?屬性將圖片水平居中，利用DIV的?padding?屬性將圖片垂直居中。
結(jié)構(gòu)代碼同上；
CSS代碼如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
備注：
?Img?是內(nèi)聯(lián)元素，要設(shè)置其?margin?屬性使其居中，就要將其轉(zhuǎn)換為塊元素?display:block;?然后利用?margin:0 auto;?實(shí)現(xiàn)圖片的水平居中；（有的設(shè)計(jì)師為圖片再加個(gè) div 標(biāo)簽，然后通過(guò) div 標(biāo)簽的?margin?實(shí)現(xiàn)居中，也可以，不過(guò)，在結(jié)構(gòu)中就又多了對(duì) div，相對(duì)麻煩點(diǎn)）至于垂直居中的方法和前面的都一樣，就不再重述。
以上方法都是有前提的，就是必須知道 DIV 與圖片的尺寸，否則無(wú)法完成垂直居中的效果。
用一行css居中并裁剪圖片的方法
設(shè)置圖片的裁剪尺寸非常簡(jiǎn)單，你只需在 CSS 里使用這行代碼：
img {
object-fit: cover;
}
就是這樣。不需要語(yǔ)義、包裝 div 或者其他沒(méi)意義的代碼。
這種技術(shù)能很好地把大小不合適的頭像圖片裁剪為正方形或者圓形的圖片。以下面那只熊的寬圖片來(lái)舉例。一旦把 ?object-fit:cover ?技術(shù)應(yīng)用在這種圖片上，并且設(shè)置好寬和高，圖片自己就會(huì)進(jìn)行裁剪和居中。
?object-fit:cover?的裁剪方式和?background-size:cover?的完全相同，不過(guò)它是用來(lái)為 imgs、videos 和其他的媒體標(biāo)簽設(shè)置樣式的，而不是給背景圖片設(shè)置樣式。
相當(dāng)多的最新瀏覽器都支持 object-fit 技術(shù)，并且還有 polyfill 項(xiàng)目讓你能在更老的瀏覽器（IE8+）里使用該技術(shù)。
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)CSS教程：厲害了我的哥,css圖片居中原來(lái)有這么多種方法
URL網(wǎng)址：http://www.5511xx.com/article/cdcdcie.html
