css控制div中元素居中的示例
發(fā)布時(shí)間：2014-04-07 08:05:22 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css控制div中元素居中的示例,需要的朋友可以參考下
div中行級(jí)元素居中
復(fù)制代碼
代碼如下:<div class="treeTitle">
<img src="images/app.png" />
<span>導(dǎo)航菜單</span>
</div>
要求：將<img>和<span>標(biāo)簽居中
解答：div為塊級(jí)元素，img和span為行內(nèi)元素。所以這個(gè)問(wèn)題歸結(jié)為塊級(jí)元素中的行內(nèi)元素的居中問(wèn)題。
復(fù)制代碼
代碼如下:#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è)概念，它無(wú)法顯示出來(lái)，但是它又確實(shí)存在。在沒(méi)有其他因素影響的時(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片的高度。圖片雖然撐開(kāi)了行框，但是不會(huì)影響行高，因此也不會(huì)影響到基于行高來(lái)計(jì)算的其他屬性。當(dāng)行內(nèi)含有圖片的時(shí)候，圖片和文字的垂直對(duì)齊方式默認(rèn)是基線對(duì)齊。所以再未加上以下代碼時(shí)，圖片和文字是底部對(duì)齊。
復(fù)制代碼
代碼如下:#treeTitle img{
vertical-align: middle;
}
關(guān)于line-height這里有篇非常好的blog講解，line-height詳解，效果如下圖所示：
相關(guān)文章
這篇文章主要介紹了css 不定寬高的元素居中布局解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2019-09-18- 在 CSS 中要設(shè)置元素水平垂直居中是一個(gè)非常常見(jiàn)的需求了。這篇文章主要介紹了CSS實(shí)現(xiàn)元素居中原理解析，本文分別從行內(nèi)元素和塊級(jí)元素進(jìn)行說(shuō)明，具有一定的參考價(jià)值，感興2018-10-18
- 下面小編就為大家?guī)?lái)一篇淺談css元素居中。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧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種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
