這篇文章主要介紹了詳解CSS元素居中佈局的簡單方法,文中介紹了內嵌元素和塊元素以及行內塊三種情況,需要的朋友可以參考下
#首先我們需要知道元素都有哪些種類?
內嵌元素(display:inline;)如a,span,b,i 【一個不可自訂的盒子】
[預設同行可以繼續跟同類型標籤]
[內容撐開寬度]
[不支援寬高]
[不支援上下的margin和padding]
[程式碼換行會解析成空]
區塊元素(display:block ;)如p,p,h1-h6
[預設獨佔一行顯示]
[基本上支援所有的css指令]
行內區塊(display:inline-block;)如img 【img就是這麼神奇的東東。它既不是內嵌又不是塊,而是行內塊】
[塊在一行顯示]
[支持寬高]
[沒有寬度時內容撐開寬度]
那麼接下來我們依序將上面三種元素置中
一、內嵌元素之單行文字
最最常見的解決方法就是使用text-align和line-height
line-height:200px; text-align:center;
但是這種處理辦法就一定十全十美嗎?我不這麼認為(估計有人吐槽我強迫症了)
反正我每次選中文字看到非文字區也被選中就很不爽,不過IE6-8只會選中文字
二、區塊元素居中
##解決方法:使用定位元素+margin負值width:100px; height:100px; position:relative; left:100px; top:100px; margin-left:-50px; margin-top:-50px;缺點:要求必須知道盒子的寬高
三、行內塊居中
(1)把img轉換成背景圖片,然後用background-position:center;但是要注意的是由於圖片的連結通常是經常改變的,所以需要這樣做:<img style=”background-img:url(imgURL)” / alt="詳解CSS元素居中佈局的簡單方法" >是不是違反了內容樣式分離的原則。 (2)輔助標籤html程式碼:
<p class="box"> <img src="img.png" / alt="詳解CSS元素居中佈局的簡單方法" ><span></span> </p>#CSS程式碼:
.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;} .box img{vertical-align:middle;border:1px solid #999;padding:2px;} .box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}
##效果:
廢話:要讓img元素和輔助元素span在一行,否則會出現水平不完全居中,當使用inline-block時,換行會被解析成空格。其實網路上還有其他方法,比如說風靡已久的table法。網路上一大堆這裡就不顯擺了。
以上是詳解CSS元素居中佈局的簡單方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!