首页 > html知识 > 正文

Div水平居中效果怎么实现

原创 2018-11-09 13:46:13 0 662
赞助会员专享特权
本篇文章主要给大家介绍实现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>

效果如下图所示:

766dab6a1227b8ede05f47b83baebec.png

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

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

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

为了让大家更直观清楚的了解margin和text-align的区别效果,我们再详细的展现每个属性的作用。

1、我们将上述中代码中div的width取消,效果如下:

cffe3f87bbd06281c1e4ebcfad57f95.png

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

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

189052c1258c83494434402f40e37dd.png

此时div中文本不再居中。

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

c14905938deeb22e7c1b99312c522a1.png

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

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

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

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

以上就是Div水平居中效果怎么实现的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:Div水平居中
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • css 如何让浮动DIV水平居中
  • DIV水平居中_html/css_WEB-ITnose
  • 怎么是浮动的div水平居中啊?_html/css_WEB-ITnose
  • CSS让div水平居中实例代码_html/css_WEB-ITnose
  • 如何让div水平居中_html/css_WEB-ITnose
  • Div水平居中效果怎么实现
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    藏色散人

    好好学习天天向上!

    最近文章
    如何学习编程 1009
    Git怎么删除文件 1070
    Git暂存区是什么 1080

    相关视频教程

  • html/css快速入门 html/css快速入门
  • HTML/CSS  5小时基础入门教程 HTML/CSS 5小时基础入门教程
  • 兄弟连高洛峰HTML+HTML5视频教程 兄弟连高洛峰HTML+HTML5视频教程
  • 独孤九贱(1)_HTML5视频教程 独孤九贱(1)_HTML5视频教程
  • html5中文手册 html5中文手册
  • 相关视频章节