让文字垂直居中

前阵子小白鼠在开发一个网页,没想到遇到一个问题,文字无法垂直居中。然后就去网上找了半天,花里胡俏的方法一大堆,涉及到弹性盒子边距甚至js。有的方法有用却影响到别的元素,有的甚至没有用……

(图片源自网络,侵权请告知,小白鼠会将其删除)

后来经过大神指点,终于搞定了,原来很简单。

但这么简单的问题却困扰了小白鼠两天,今天我就分享出来,不让更多的小白跳坑里,也算做一个小笔记。


方法很简单,只需要:

将行高与元素的高设置成一样的即可


既然本文面对的人群是小白,那么我就唠叨一下,大神勿喷。。。

如果html是这样的:

<!DOCTYPE html>

<html lang="cn-zh">

<head>

<meta charset="UTF-8">

</head>

<body>

<div>测试文字</div>

</body>

</html>

而且css是这样的:

div{

height: 30px;

}

height元素高度line-height就是行高,所以就在css里加上一句:

line-height: 30px;

也就是:

div{

height: 30px;

line-height: 30px;

}

搞定!


如果你想得到文中同款的代码高亮,可以参考我的另一篇文章,地址:http://www.360doc.com/content/21/0119/17/68935242_957819581.shtml,文中还有自己建站用的代码高亮哟。


如果你有更好的方法,欢迎评论留言。

如果本文对你有帮助,记得转藏,并且分享给身边更多的朋友,让知识传递。

(0)

相关推荐