DIV+CSS文字垂直居中 解決左側頭像右側姓名，姓名多換行後相對於頭像仍居中顯示
在說到這個問題的時候，也許有人會問CSS中不是有vertical-align屬性來設置垂直居中的嗎？即便是某些瀏覽器不支持我只需作少量的CSS Hack技術就能夠啊！因此在這裏我還要囉嗦兩句，CSS中的確是有vertical-align屬性，可是它只對(X)HTML元素中擁有valign 特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而 像<div>、<span>這樣的元素是沒有valign特性的，所以使用vertical-align對它們不起做用。
CSS網頁佈局DIV水平居中的各類方法
1、單行垂直居中
若是一個容器中只有一行文字，對它實現居中相對比較簡單，咱們只須要設置它的實際高度height和所在行的高度line-height相等便可。如：
imoker.cn（愛摩客）提供的代碼片斷：
div {
height:25px;
line-height:25px;
overflow:hidden;
}
這段代碼很簡單，後面使用overflow:hidden的設置是爲了防止內容超出容器或者產生自動換行，這樣就達不到垂直居中效果了。
imoker.cn（愛摩客）提供的代碼片斷：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 單行文字實現垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>如今咱們要使這段文字垂直居中顯示！</div>
</body>
</html>
不過在Internet Explorer 6及如下版本中，這和方法不支持對圖片設置垂直居中。
2、多行未知高度文字的垂直居中
若是一段內容，它的高度是可變的那麼咱們就可使用上一節講到的實現水平居中時使用到的最後一種方法，就是設定Padding，使上下的padding值 相同便可。一樣的，這也是一種「看起來」的垂直居中方式，它只不過是使文字把<div>徹底填充的一種方式而已。可使用相似下面的代碼：
imoker.cn（愛摩客）提供的代碼片斷：
div {
padding:25px;
}
這種方法的優勢就是它能夠在任何瀏覽器上運行，而且代碼很簡單，只不過這種方法應用的前提就是容器的高度必須是可伸縮的。
imoker.cn（愛摩客）提供的代碼片斷：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實現垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><pre>如今咱們要使這段文字垂直居中顯示！
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</pre></div>
</body>
</html>
3、多行文本固定高度的居中
在本文的一開始，咱們已經說過CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標籤起做用，可是在CSS中還有一 個display屬性可以模擬<table>，因此咱們可使用這個屬性來讓<div>模擬<table>就可使 用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必須設置在父元素上，後者 必須設置在子元素上，所以咱們要爲須要定位的文本再增長一個<div>元素：
imoker.cn（愛摩客）提供的代碼片斷：
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
imoker.cn（愛摩客）提供的代碼片斷：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實現垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content"><pre>如今咱們要使這段文字垂直居中顯示！
div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</pre></div>
</div>
</body>
</html>
這個方法應該是很理想了，可是不幸的是Internet Explorer 6 並不能正確地理解display:table和display:table-cell，所以這種方法在Internet Explorer 6及如下的版本中是無效的。嗯，這讓人很鬱悶！不過咱們還其它的辦法。
4、在Internet Explorer中的解決方案
在Internet Explorer 6及如下版本中，在高度的計算上存在着缺陷的。在Internet Explorer 6中對父元素進行定位後，若是再對子元素進行百分比計算時，計算的基礎彷佛是有繼承性的（若是定位的數值是絕對數值沒有這個問題，可是使用百分比計算的基 礎將再也不是該元素的高度，而從父元素繼承來的定位高度）。例如，咱們有下面這樣一個(X)HTML代碼段：
imoker.cn（愛摩客）提供的代碼片斷：
<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
若是咱們對subwrap進行了絕對定位，那麼content也會繼承了這個屬性，雖然它不會在頁面中立刻顯示出來，可是若是再對content進行相對 定位的時候，你使用的100%分比將再也不是content原有的高度。例如，咱們設定了subwrap的position爲40%，咱們若是想使 content的上邊緣和wrap重合的話就必須設置top:-80%;那麼，若是咱們設定subwrap的top:50%的話，咱們必須使用100%才 能使content回到原來的位置上去，可是若是咱們把content也設置50%呢？那麼它就正好垂直居中了。因此咱們可使用這中方法來實現 Internet Explorer 6中的垂直居中：
imoker.cn（愛摩客）提供的代碼片斷：
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
固然，這段代碼只能在Internet Exlporer 6等計算存在問題的瀏覽器中才會有做用。（不過我不解，我查閱了不少文章，不知道是由於出處相同仍是什麼緣由，彷佛不少人都不肯意去解釋Internet Exlporer 6中這個Bug的原理，我也只是瞭解了一點皮毛，還要再研究）
imoker.cn（愛摩客）提供的代碼片斷：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實現垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
top:50%;
}
div#content {
position:relative;
top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>如今咱們要使這段文字垂直居中顯示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div>
</div>
</div>
</body>
</html>
5、完美的解決方案
那麼咱們綜合上面兩種方法就能夠獲得一個完美的解決方案，不過這要用到CSS hack的知識。對於若是使用CSS Hack來區分瀏覽器，你能夠參考這篇「簡單CSS hack：區分IE六、IE七、IE八、Firefox、Opera」：
imoker.cn（愛摩客）提供的代碼片斷：
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
至此，一個完美的居中方案就產生了。
imoker.cn（愛摩客）提供的代碼片斷：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字實現垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
div#subwrap {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
div#content {
_position:relative;
_top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>如今咱們要使這段文字垂直居中顯示！
div#wrap {
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:500px;
position:relative;
}
div#subwrap {
position:absolute;
border:1px solid #000;
top:50%;
}
div#content {
border:1px solid #000;
position:relative;
top:-50%;
}
</pre></div>
</div>
</div>
</body>
</html>
p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，雖然同是居中但關鍵字不一樣。css
- 1. 利用Bootstrap在柵格中左側圖片，右側文字垂直居中
- 2. CSS3 垂直居中 左右居中
- 3. 百家姓姓名頭像圖標素材, 無複姓, 近500個姓名漢字圖 持續更新中
- 4. div+css：頁面總體佈局居中顯示：上下居中||垂直居中，左右居中||水平居中
- 5. 多行，單行文字垂直居中，圖片垂直居中，圖文垂直居中
- 6. UILable UITextField 文字 上下 左右 垂直 居中 對其
- 7. 多行文字垂直居中
- 8. 多行文字的垂直居中
- 9. html div左右/垂直居中
- 10. Android中TextView文字居中與垂直靠左居中
- 更多相關文章...
- • PHP imagecharup - 垂直地畫一個字符 - PHP參考手冊
- • ionic 側欄菜單 - ionic 教程
- • Scala 中文亂碼解決
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點