Heim > Web-Frontend > HTML-Tutorial > CSS如何实现多行文本垂直居中效果_html/css_WEB-ITnose

CSS如何实现多行文本垂直居中效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-24 11:30:52
Original
1194 Leute haben es durchsucht

CSS如何实现多行文本垂直居中效果:
想要实现单行文本在元素中垂直居中,非常的简单,只要将元素的line-height和height属性值设置为相同即可,例如:

 

line-height:30px;height:30px;
Nach dem Login kopieren

但是要设置多行文本垂直居中效果,就稍稍费一些周折了,代码如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.vcenter {  width:100px;  height:102px;  vertical-align:middle;  display:table-cell;  overflow:hidden;  background:red;}</style></head><body><div class="vcenter">蚂蚁部落欢迎您</div></body></html>
Nach dem Login kopieren

以上代码可以将多行文本设置为垂直居中效果,不过IE7和IE7以下浏览器不支持。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11580

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage