css控制div中元素居中的示例

div中行級(jí)元素居中
<div class="treeTitle">
<img src="images/app.png" />
<span>導(dǎo)航菜單</span>
</div>
要求:將<img>和<span>標(biāo)簽居中
解答:div為塊級(jí)元素,img和span為行內(nèi)元素。所以這個(gè)問題歸結(jié)為塊級(jí)元素中的行內(nèi)元素的居中問題。
#treeTitle {
background: url(../images/bj.png);
height: 30px;
color: white;
text-align: left;
line-height: 30px;
}
#treeTitle img{
vertical-align: middle;
}
line-height為行高,指的是文本行的基線間的距離。
行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框,行內(nèi)框只是一個(gè)概念,它無法顯示出來,但是它又確實(shí)存在。在沒有其他因素影響的時(shí)候,行內(nèi)框等于內(nèi)容區(qū)域,而設(shè)定行高則可以增加或者減少行內(nèi)框的高度,即,即:將行距的值(行高-字體尺寸)除以2,分別增加到內(nèi)容區(qū)域的上下兩邊,如下圖:
由于行高可以應(yīng)用在任何元素上,因此同一行內(nèi)的若干元素可能有不同的行高和行內(nèi)框高。行框是指本行的一個(gè)虛擬矩形框,其高度等于本行內(nèi)所有元素中行高最大的值。當(dāng)有多行內(nèi)容時(shí),每行都會(huì)有自己的行框。
當(dāng)內(nèi)容中含有圖片的時(shí)候,如果圖片的高度大于行高,則含有圖片行的行框?qū)⒈粨未蟮缊D片的高度。圖片雖然撐開了行框,但是不會(huì)影響行高,因此也不會(huì)影響到基于行高來計(jì)算的其他屬性。當(dāng)行內(nèi)含有圖片的時(shí)候,圖片和文字的垂直對(duì)齊方式默認(rèn)是基線對(duì)齊。所以再未加上以下代碼時(shí),圖片和文字是底部對(duì)齊。
#treeTitle img{
vertical-align: middle;
}
關(guān)于line-height這里有篇非常好的blog講解,line-height詳解,效果如下圖所示:

相關(guān)文章
- 這篇文章主要介紹了css 不定寬高的元素居中布局解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起2019-09-18
- 在 CSS 中要設(shè)置元素水平垂直居中是一個(gè)非常常見的需求了。這篇文章主要介紹了CSS實(shí)現(xiàn)元素居中原理解析,本文分別從行內(nèi)元素和塊級(jí)元素進(jìn)行說明,具有一定的參考價(jià)值,感興2018-10-18
- 下面小編就為大家?guī)硪黄獪\談css元素居中。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-19
- 這篇文章主要介紹了CSS元素居中布局的簡(jiǎn)單方法,文中介紹了內(nèi)嵌元素和塊元素以及行內(nèi)塊三種情況,需要的朋友可以參考下2015-07-18
- 這篇文章主要介紹了CSS實(shí)現(xiàn)定位元素居中的方法,主要涉及到transform和margin的使用,需要的朋友可以參考下2015-06-23
html元素水平居中、垂直居中、水平垂直居中于其父級(jí)元素的方法
這篇文章主要介紹了html元素 水平居中、垂直居中、水平垂直居中于其父級(jí)元素的方法,需要的朋友可以參考下2014-04-08- 這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02