DIV和SPAN垂直居中對(duì)齊的實(shí)現(xiàn)方法
發(fā)布時(shí)間：2014-02-20 15:13:46 作者：佚名 
我要評(píng)論
我要評(píng)論DIV和SPAN如何垂直居中對(duì)齊，水平居中很簡(jiǎn)單，設(shè)置text-align:center就可以了，垂直居中一直很是疑惑，下面為大家解惑
水平居中很簡(jiǎn)單，設(shè)置text-align:center就可以了，但是垂直居中一直都不得其解！
以前總是嘗試著調(diào)padding-top,但是有的時(shí)候好使，更多的時(shí)候不行，今天同樣，當(dāng)height值不大時(shí)，增加padding-top就會(huì)增加了整個(gè)DIV或者SPAN的高度，很惱火！
正在想理論上vertical-align的默認(rèn)值應(yīng)該是baseline啊，不會(huì)頂對(duì)齊啊，突然想起字體有個(gè)line-height屬性，于是很顯然其默認(rèn)值就是一個(gè)字那么高，于是將line-height值改得和DIV或者SPAN的height相同！
于是，DIV和SPAN中的文字垂直居中對(duì)齊了！
后來(lái)在百度里面一搜，耐著性子多翻了幾頁(yè)，終于在一個(gè)不大論壇里面發(fā)現(xiàn)了同樣的方法！要是以前能耐心一點(diǎn)不早就搞定這個(gè)問(wèn)題了么，何必還浪費(fèi)這么多時(shí)間？讓人又想起了貝爾發(fā)明電話的老故事...sigh...不想了！
以前總是嘗試著調(diào)padding-top,但是有的時(shí)候好使，更多的時(shí)候不行，今天同樣，當(dāng)height值不大時(shí)，增加padding-top就會(huì)增加了整個(gè)DIV或者SPAN的高度，很惱火！
正在想理論上vertical-align的默認(rèn)值應(yīng)該是baseline啊，不會(huì)頂對(duì)齊啊，突然想起字體有個(gè)line-height屬性，于是很顯然其默認(rèn)值就是一個(gè)字那么高，于是將line-height值改得和DIV或者SPAN的height相同！
于是，DIV和SPAN中的文字垂直居中對(duì)齊了！
后來(lái)在百度里面一搜，耐著性子多翻了幾頁(yè)，終于在一個(gè)不大論壇里面發(fā)現(xiàn)了同樣的方法！要是以前能耐心一點(diǎn)不早就搞定這個(gè)問(wèn)題了么，何必還浪費(fèi)這么多時(shí)間？讓人又想起了貝爾發(fā)明電話的老故事...sigh...不想了！
相關(guān)文章
css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例
這篇文章主要介紹了css實(shí)現(xiàn)文本和div居中對(duì)齊詳細(xì)講解示例,需要的朋友可以參考下2014-05-05通過(guò)position定位實(shí)現(xiàn)div底端對(duì)齊
這篇文章主要介紹了通過(guò)position定位實(shí)現(xiàn)div底端對(duì)齊，感興趣的朋友可以參考下2014-04-02多個(gè)div中table的tdwidth設(shè)置一樣也不法對(duì)齊
最近發(fā)現(xiàn)多個(gè)div中table的td就算調(diào)成一樣的width也無(wú)法對(duì)齊，后來(lái)發(fā)現(xiàn)了解決方法，提到table-layout: fixed，經(jīng)設(shè)置效果相當(dāng)不錯(cuò)，大家可以參考下2014-03-28圖片在div中垂直和水平同時(shí)對(duì)齊的實(shí)現(xiàn)方法
這篇文章主要介紹了關(guān)于圖片在div中垂直和水平同時(shí)對(duì)其的問(wèn)題，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-03-28將一個(gè)絕對(duì)定位的div水平垂直居中對(duì)齊
在某些時(shí)候可能需要將一個(gè)絕對(duì)定位的div在它的父對(duì)象中垂直居中對(duì)齊，可能用到的頻率不是太高，但是偶爾也會(huì)用到，下面就簡(jiǎn)單介紹一下如何實(shí)現(xiàn)此功能2014-01-27div中加入span右對(duì)齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對(duì)齊后，出現(xiàn)了換行問(wèn)題，一般思路的話一定是認(rèn)為通過(guò)分開(kāi)兩列，一個(gè)align=left,另一個(gè)align=right；很是疑惑，于是利用閑暇時(shí)間，搜索整理下，曬出來(lái) 2012-12-19 div中子div在firefox ie 水平居中對(duì)齊
div 水平居中的實(shí)現(xiàn)方法。2009-10-15CSS讓圖片垂直居中和底端對(duì)齊的代碼-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
本CSS教程提供了兩種對(duì)齊方式即垂直居中對(duì)齊和底端對(duì)齊！更多內(nèi)容請(qǐng)參考本站的CSS視頻教程。 CSS使圖片垂直居中的代碼： <!DOCTYPE html PUBLIC "-//W3C//DT2008-10-17這篇文章主要為大家詳細(xì)介紹了html5 div布局與table布局，區(qū)分div布局與table布局的異同,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-16學(xué)習(xí)DIV+CSS網(wǎng)頁(yè)布局之三列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁(yè)布局中的三列布局，本文為大家分享的是DIV+CSS網(wǎng)頁(yè)布局教程的第三篇，感興趣的小伙伴們可以參考一下2016-03-15最新評(píng)論
大家感興趣的內(nèi)容
- 1div圖片垂直居中 如何使div中圖片垂直居中
- 2css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)
- 3讓兩個(gè)Div并排顯示的多種方法
- 4圖片上添加文字的兩種常用方式
- 5限制div高度當(dāng)內(nèi)容多了溢出時(shí)顯示滾動(dòng)條
- 6div 背景透明度 如何設(shè)置一個(gè)div的背景透明度
- 7如何用CSS讓文字居于div的底部
- 8采用CSS定位屬性實(shí)現(xiàn)Html中DIV層疊與懸浮
- 9div 溢出隱藏 div文字溢出用點(diǎn)(省略號(hào))代替
- 10設(shè)置DIV最小高度以及高度自適應(yīng)隨著內(nèi)容的變化而變化
最近更新的內(nèi)容
- 如何實(shí)現(xiàn)div 圖片在DIV內(nèi)水平居中
- DIV CSS實(shí)現(xiàn)網(wǎng)頁(yè)背景半透明效果
- 解析div與span區(qū)別與用法
- 設(shè)置div背景透明的方法示例
- CSS實(shí)現(xiàn)div不設(shè)高度完全居中
- div自適應(yīng)高度自動(dòng)填充剩余高度
- 詳解DIV+CSS的命名規(guī)矩才能有利于SEO優(yōu)化的實(shí)現(xiàn)方法
- DIV或者DIV里面的圖片水平與垂直居中的方法
- 詳解如何用div實(shí)現(xiàn)自制滾動(dòng)條
- div對(duì)齊與網(wǎng)頁(yè)布局詳解