實現DIV層內的文字垂直居中(單行文字/多行文字)

PC教程網】關于實現DIV層內的文字垂直居中(單行文字/多行文字)_文字垂直居中介紹:如果是單行文字想垂直居中,只要保證div高和行高保持一致,就可以了。用下面的代碼即可實現: 實例代碼 代碼如下: #div-a{ height:60px; line-height:60px; } 如果是多行文字,上面的垂直居中,下面小編為您針對實現DIV層內的文字垂直居中(單行文字/多行文字)進行分享:

如果是單行文字想垂直居中,只要保證div高和行高保持一致,就可以了。用下面的代碼即可實現:

實例代碼
代碼如下:

#div-a{
height:60px;
line-height:60px;
}

如果是多行文字,上面的垂直居中的方法就不行了,得用變通的方法實現;這里建議使用table方法,在table外面再套上相應的div,

代碼如下:

實例代碼
代碼如下:

<table>
<tr>
<td style="vertical-align:middle;height:300px;background-color:red"></td>
</tr>
</table>

多行文字居中還有另外一種方法:

多行內容居中,且容器高度可變,也很簡單,給出一致的 padding-bottom 和 padding-top 就行:

實例代碼
代碼如下:

.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}

相關教程

css3設置box-pack和box-align讓div里面的元素垂直居中

以前處理垂直居中用的方法是設置div的height和line-height是一樣的值,現在就不用那么麻煩了。只要設置元素的box-pack和box-align即可,這兩個屬性當前只有webkit和moz支持。其中box-pack控制的 …

css中position:fixed實現div在窗口上下左右居中

上下左右 居中 代碼如下 實例代碼 代碼如下: div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 刪掉即可 如果只 …

經常用的圖片在容器中的水平垂直居中實例

這是一個未知大小的圖片在一個已知大小容器中的水平和垂直居中的例子,原文標題:“Centeringanimageofunknownsizeinanoutercontainerofknownsize”。 這個水平和垂直居中的例子能正常工作在IE5.x,I …

JS+CSS實現DIV層的展開、收縮效果

JS+CSS實現DIV層的展開、收縮效果

本文為大家分享的第一個實例:JS控制DIV層的展開、收縮效果。 htmlheadtitleCSS+JS實現一個DIV層的展開/折疊效果/titlestyle* { margin:0; padding:0;}body { text-align:center; font:75% Verdana, Arial, Helvetica, …

Javascript實現div層漸隱效果的方法

本文實例講述了Javascript實現div層漸隱效果的方法。分享給大家供大家參考。具體實現方法如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition …

js實現div層緩慢收縮與展開的方法

本文實例講述了js實現div層緩慢收縮與展開的方法。分享給大家供大家參考。具體分析如下: 這是一個層伸縮與展開的特效代碼,帶有點動畫效果,緩慢展開,DIV+JS聯合打造,看上去還 …

jQuery實現DIV層收縮展開的方法

本文實例講述了jQuery實現DIV層收縮展開的方法。分享給大家供大家參考。具體實現方法如下: 教程實例 代碼如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml …

jQuery實現DIV層淡入淡出拖動特效的方法

本文實例講述了jQuery實現DIV層淡入淡出拖動特效的方法。分享給大家供大家參考。具體實現方法如下: 教程實例 代碼如下: html head titlejQuery實現DIV層淡入淡出的拖動效果)/title style typ …

内蒙古十一选五任五推荐号