css水平居中总结_html/css_WEB-ITnose

前言

　　看了好多篇帖子，发现没有一个能够直接让新手很快上手使用的居中布局。所以在此进行一番总结，也算是我对居中布局的一点点积累沉淀，同时也方便初学者们拿来即用。

一、元素分类

1.行内元素

行内元素，也就是内联元素，可以在一行内显示多个。注：元素的高度、宽度、顶部底部边距均不可设置，元素的高度和宽度就是它包含的文字或图片的高度和宽度。

行内元素有这些：

、、
、、、、、、、、

当然有些时候可以通过以下代码变成块级元素：

display: block;

2.块级元素

块级元素，霸占一行，别的元素要另起行才可以。注：元素的高度、宽度、顶部底部边距可设置，元素宽度在不设置的情况下，是它本身父容器的100%。

块级元素有这些：

、

、

...

、

、

、

、、

、

、

同样的你也可以通过以下代码把块级元素变为行内元素：

display: inline;

3.内联块状元素简介

内联块状元素，和行内元素相似，都在可以显示在一行上。注：元素的高度、宽度、行高以及顶和底边距都可设置。

内联块状元素有这些：、

display: inline-block;

二、居中方法

a.使用左右外边距自适应方法：margin: 0 auto; 　　 /*使用此方法需要变为内联块状元素*，且需要固定宽度*/

b.同样使用左右外边距方法：

width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px; /*250px是元素的宽度除以2得到，且需要进行定位*/

c.父元素设置text-align: center; /*使用此方法需要变为行内元素*/

d.对于宽度不确定的元素，可以在外层套上一个table标签，然后给table使用margin: 0 auto;来居中：

table{

　　margin: 0 auto;

}

HTML代码：

　　 我想水平居中！

e.对于宽度不确定的元素，给它和父元素进行定位，分别设置left: -50%和left: 50%，然后实现水平居中：

.father{
　　position:relative;
　　left:50%;
　　width: 960px;
　　height: 300px;
　　background: yellow;
}
.children{
　　height: 30px;
　　background:#ccc;
　　position:relative;
　　left:-50%;
}

HTML代码：


　　

aaaaaaaa






声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• html下拉菜单文字怎么变小
• html5中元素能拉伸宽度吗
• HTML里怎么设置thead表头的颜色
• html5怎么创建跳转页尾超链接
• css水平居中总结_html/css_WEB-IT...

• datatable的前后端配置实战03
• datatable的前后端配置实战02
• datatable的前后端配置实战01
• 搭建完美的后台首页（iframe）02

网友评论

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

我要评论



立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息



认证0级讲师

发布技术文章

• 最新文章
• 热门排行



• html中怎么清除li黑点
• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html的name和value是什么意思
• html如何给背景图片设置透明度
• html中怎么让列表横向排列
• html5怎么创建跳转页尾超链接
• 十分钟搞懂form标签中的GET和POST提交方式



• 404 not found是什么意思
• DOM是什么意思
• url是什么意思？
• 如何改变图片大小
• html是什么
• html如何创建电子邮件链接
• HTML编辑器有哪些？最好用的4款HTML编辑器推荐
• 如何制作一个简单的HTML登录页面（附代码）

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作