Erlo

Div垂直居中效果怎么实现

2018-11-09 16:02:27 发布   199 浏览  
页面报错/反馈
收藏 点赞
原文:http://www.php.cn/jishu/html/412753.html

本篇文章主要给大家介绍实现div垂直方向居中的方法。

网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能。div水平居中效果我们在之前的文章中有为大家介绍过,想必新手朋友们也都已经掌握了解了。

下面我们就继续结合简单的示例给大家介绍div内容垂直居中的实现方法。

推荐参考学习:《html教程

div垂直居中代码示例如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div垂直居中</title>
</head>
<body>
<div style="line-height: 500px;height: 500px;width: 500px;  background: red;">
    PHP中文网
</div>
</body>
</html>

前台效果如下图所示:

43236c8ed32a2ce6726f860720c3a4e.png

如图所示,div中的文字垂直居中。其中主要的属性就是line-height
line-height 属性设置行间的距离(行高即垂直方向)。

line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值。

如果我们这里将设置的高度height:500px,改为200px,那么呈现效果如下:

f9b5d149af3b9a3c2fa6a8e6399f214.png

如果我们这里不设置高度height但是设置line-height: 200px;,效果就如下所示:

be5b1028c3db681b89467f71979ed30.png

此时我们可以测量发现红色背景的div的高度为400px。

line-height和height区别

简单得说,line-height是行高的意思,height则是定义元素自身的高度。

综上所述,当我们想要实现div内容垂直居中效果,需要使line-heightheight值保持一致。

本篇文章就是关于div垂直居中的实现方法介绍,也是非常简单易懂的,希望对需要的朋友有所帮助!


登录查看全部

参与评论

评论留言

还没有评论留言,赶紧来抢楼吧~~

手机查看

返回顶部

给这篇文章打个标签吧~

棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认