Div垂直居中效果怎么实现-pengetahuan html-php.cn

Rumah

pengaturcaraan harian

pengetahuan html

Div垂直居中效果怎么实现

藏色散人

Nov 09, 2018 pm 03:52 PM

本篇文章主要给大家介绍实现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>

Salin selepas log masuk

前台效果如下图所示：

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

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

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

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

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

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

line-height和height区别：

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

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

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

Atas ialah kandungan terperinci Div垂直居中效果怎么实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn