首頁  >  文章  >  web前端  >  詳解CSS元素居中佈局的簡單方法

詳解CSS元素居中佈局的簡單方法

高洛峰
高洛峰原創
2017-03-10 11:08:241748瀏覽

這篇文章主要介紹了詳解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只會選中文字
詳解CSS元素居中佈局的簡單方法

二、區塊元素居中

##解決方法:使用定位元素+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;}

##效果:


詳解CSS元素居中佈局的簡單方法廢話:要讓img元素和輔助元素span在一行,否則會出現水平不完全居中,當使用inline-block時,換行會被解析成空格。其實網路上還有其他方法,比如說​​風靡已久的table法。網路上一大堆這裡就不顯擺了。

以上是詳解CSS元素居中佈局的簡單方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn