| html div 内容居中 | 您所在的位置：网站首页 › div标签内容居中 › html div 内容居中 |
html div 内容居中
|
html div 内容居中
原创
mb64216b23e45d0 2023-03-28 09:36:51 博主文章分类：html ©著作权 文章标签 垂直居中 父级元素 html 文章分类 HarmonyOS 后端开发 ©著作权归作者所有：来自51CTO博客作者mb64216b23e45d0的原创作品，请联系作者获取转载授权，否则将追究法律责任 Div居中，Div里的内容居中
1.DIV居中：主要的样式定义如下： body {text-align: center;} #center { margin-right: auto; margin-left: auto; }
说明：首先在父级元素定义text-align: center;这个的意思就是在父级元素内的内容居中；对于ie这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个div里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。 2.div中的内容垂直居中 body {text-align: center;} #center { margin-right: auto; margin-left: auto; height:200px; background:#f00; width:400px; vertical-align:middle; line-height:200px; }
说明： vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个div一样高 line-height:200px;然后插入文字，就垂直居中了。 3.div中的内容水平居中 #center { height:200px; background:#f00; width:400px; text-align:center;} text-align:center; 水平居中
赞 收藏 评论 分享 举报 上一篇：jquery 操作 select 下一篇：CAS单点登录应用 |
【本文地址】
公司简介
联系我们