在 CSS 中，可以使用多种属性来水平对齐元素。

块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。

块元素的例子：

在本教程中，我们将向您展示出于布局目的如何水平对齐块级元素。

---

使用 margin 属性来水平对齐

可通过将左和右外边距设置为 "auto"，来对齐块元素。

注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：

实例.center{margin-left:auto;margin-right:auto;width:70%;background-color:#b0e0e6;}

提示：如果宽度是 100%，则对齐没有效果。

注释：在 IE5 中，对于块元素存在一个外边距处理方面的 BUG。如需使上面的例子在 IE5 中有效，请添加一些额外的代码

---

使用 position 属性进行左和右对齐

对齐元素的方法之一是使用绝对定位：

实例.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

---

跨浏览器兼容性问题

当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是

）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

实例body{margin:0;padding:0;}.container{position:relative;width:100%;}.right{position:absolute;right:0px;width:300px;background-color:#b0e0e6;}

---

使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性：

实例.right{float:right;width:300px;background-color:#b0e0e6;}

---

跨浏览器兼容性问题

当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

实例body{margin:0;padding:0;}.right{float:right;width:300px;background-color:#b0e0e6;}

上一篇：CSS 分组 下一篇：CSS 派生选择器

相关推荐

WebSocket 连接池生产级实现：实时行情高可用与负载均衡 工程上的实践是寻找一个能跨市场的统一网关。本文测试环境选用了 TickDB，它通过单一 WebSocket 连接即可订阅多市场标的，心跳协议标准化为每 1 秒 ping，你无需为不同市场的连接。

2026-04-18

立即查看

使用 Python 合并与拆分 Excel 单元格的实用方法 合并单元格可以将多个相邻单元格组合成一个更大的单元格，常用于创建表头、突出显示重要信息或改善表格布局。本文将介绍如何使用 Python 编程方式实现 Excel 单元格的合并与拆分操作。

2026-04-18

立即查看

5.响应式系统比对：手写 React 响应式状态库 Mobx 文通过相对比较简洁的代码实现了 Mobx 的核心原理，同时对比了同时响应式的 Vue 和 Mobx 的最大设计区别，在 Vue 中创建的响应式数据，是可以随意在任何地方通过普通属性访问器进行修改的，但

2026-04-18

立即查看

踩坑分享：Vite Plus 最佳实践 写在前面 掘金的同学们大家好呀，作者是 Varlet UI 的作者。掘金文章已经一年没更新了，去年跳槽到了一家创业公司负责前端架构工作，写文章这件事就一直搁置了。最近稍微缓过来了一点点（其实还是压力很

2026-04-18

立即查看