Div内容居中效果如何实现-pengetahuan html-php.cn

Rumah

pengaturcaraan harian

pengetahuan html

Div内容居中效果如何实现

藏色散人

Nov 09, 2018 pm 03:53 PM

本篇文章主要给大家介绍div内容居中也就是div内容上下左右都居中的效果方法。

对于div内容居中的效果，相信大家都非常熟悉了，比如我们常见的网站导航栏部分。那么在之前的文章中就给大家介绍过div水平居中以及div垂直居中的实现方法。

推荐学习参考：《HTML教程》

下面继续给大家介绍div内容居中的效果实现方法。

div内容居中的代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div内容居中</title>
</head>
<body>
<div style="line-height: 200px;margin: 0 auto;text-align: center; width: 200px;  background: red;">
    PHP中文网
</div>
</body>
</html>

Salin selepas log masuk

前台效果如下图所示：

如图显示，div中内容居中。

这里我们设置了line-height属性保证内容垂直居中并设置text-align: center;属性保证div内容水平居中。

而设置margin: 0 auto;属性则是为了div能在浏览器页面里显示水平居中，当然也可以不设置，如果不设置margin，div内容仍然会居中显示，如下图所示：

相关属性总结：

line-height 属性设置行间的距离（行高）。

text-align 属性规定元素中的文本的水平对齐方式，center表示把文本排列到中间。

本篇文章就是关于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