關於讓一個未知寬高的img在一個div中居中的問題?
&
&
&& &&& &
剛進來的時候沒仔細看問題。。。
我沒有測試過標題中的代碼能不能正確居中,所以我只是單純解釋一下原理【或者說這段代碼作者的想法】.box{
text-align:center; /*這個是讓內部文字(行內元素)水平居中*/
height: 100%;vertical-align: middle;
/*把span的高度設置為父元素的高度,然後把水平對其的標線設置為正中間,由於子元素高度和父元素相同,所以span的正中間就是父元素正中*/
}
img{vertical-align: middle;}/*把img的標線設置為正中這個時候正中和span的正中對齊,也就和父元素的正中對齊,於是垂直居中了*/
span{
display:inline-block;
/*上面一行這麼些原因是,如果設置為inline,那麼無法設置高度,因為行內元素的高度和內容相等,無法手動設置,如果設置為block那麼會獨佔一行,那麼和img就不在一行了*/
}
這種方法的原理在於
水平居中:直接使用父元素的text-align設置水平居中垂直居中:兩個inline元素,一個設置為inline-block,讓其允許設置高度,讓高度填滿,另外一個去對齊這個inline元素。vertical-align 設置的是一個基線。
瀏覽器在渲染的時候,行內元素的對齊使用的是基線對齊也就是說,元素一和元素二和元素三在同一行,瀏覽器所做的是保證三個元素的基線在同一條水平直線上,vertical-align:middle設置基線為元素的垂直中心(垂直平分左右邊線),只要基線對齊,也就是垂直中心在同一水平線上。這個方法要注意兩點
1.span內部不能有任何東西,包括空格換行符
2.span和img之間不能有任何東西=========以下是原回答============position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
display:block;
position:absolute
top:50%
left:50%transform:translate3D:(-50%,-50%,0)我來提供一種簡單的方式:
&
&&&here are test words&&
&
原理是行內元素垂直對齊,基本方法就是憑空造一條無視覺效果的行內元素與img(或其他行內元素)對齊,使用before標籤這種純CSS方法,對結構無污染,但也意味著如果不支持:before偽類的話……
line-height:800px;即可。不過包括題例在內的辦法都好牛逼,從來沒有想到過。。
display:inline-block
將圖片既具有block的寬度高度特性又具有inline的同行特性。這裡的img與一個height:100% 的span同行,使這一行的行高撐滿div。
vertical-align: middle;
讓行內元素垂直居中。text-align: center;頁面內居中對齊,因為水平上有寬度的只有圖片,所以圖片水平也居中了。相當於word的這個:關於為什〈span〉也要加vertical-align:
因為你如果不給span設置屬性,css會給span一個默認屬性:vertical-align:baseline;也就是span底部對齊父元素的基線(baseline),你在span里打個字就看出來了,基線被自動畫在div的底部的話,&就跟著依據這條基線為軸垂直居中了。於是就這樣,很不錯的技巧,我也學習了。給img一個樣式:左右邊距 自動
推薦閱讀:
※position:absolute和margin:auto連用居中的原理?
※inline-block元素設置margin-bottom為負值後為什麼會下移?
※工作中常用的HTML+CSS布局有哪些可以總結出的模式?
※CSS 中 a 標籤為什麼不能繼承父類的顏色?
※css偽元素:after和 :before 存在的意義?