Div水平居中效果怎么实现

互联网 18-11-9

本篇文章主要给大家介绍实现div水平居中的具体方法。

对于html/css的初学者来说，实现div各种居中（如水平居中，垂直居中等）的办法，想必大家也都有所了解，毕竟优秀的div排版是制作网页页面的基本组成部分。

推荐参考：《html教程》

下面我们就结合简单的示例给大家介绍实现div水平居中的方法。

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

这里我们主要运用到样式属性是“text-align: center;”和“margin: 0 auto;”。

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

margin 简写属性在一个声明中设置所有外边距属性，属性值为0 auto则表示浏览器计算外边距并为0。

从图中我们可以发现，当我们不给div设置宽度但仍然有text-align和margin属性时，div中内容依旧保持水平居中。

2、如果我们再将text-align属性取消，效果如下图所示：

此时div中文本不再居中。

3、如果我们将margin属性取消但设置text-align和width时，效果如下图所示：

此时我们可以发现，文本居中但是div不再水平居中。

注：所有浏览器都支持 text-align 和margin属性。

综上所述，想要实现指定的div水平居中，必须要结合使用“text-align: center;”和“margin: 0 auto;”这个两个属性。

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

以上就是Div水平居中效果怎么实现的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： Div水平居中

Div水平居中效果怎么实现

相关资讯

标签推荐