CSS 布局 |
您所在的位置:网站首页 › 德州牌手毒王dwan世界排名 › CSS 布局 |
CSS 布局 - 水平和垂直对齐
❮ 上一节
下一节 ❯
▲
▼
◀
►
水平和垂直居中的元素
居中对齐元素
要使块元素(例如 )水平居中,请使用 margin: auto;。 设置元素的宽度将防止其延伸到容器的边缘。 然后,元素将占用指定的宽度,剩余空间将在两个外边距之间平均分配: 这个 div 元素是居中的 实例 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 亲自试一试 »注释: 如果未设置 width 属性(或将其设置为 100%),则居中对齐无效。 居中对齐文本如果仅需在元素内居中文本,请使用 text-align: center;: 这段文本是居中的。 实例 .center { text-align: center; border: 3px solid green;} 亲自试一试 »提示: 有关如何对齐文本的更多例子,请参见 CSS 文本 这一章。 居中对齐图像如需居中图像,请将左右外边距设置为 auto,并将其设置为块元素: ![]() 对齐元素的一种方法是使用 position: absolute; : In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 实例 .right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } 亲自试一试 »注释: 绝对定位的元素将从正常流中删除,并可能出现元素重叠。 左和右对齐 - 使用 float对齐元素的另一种方法是使用 float 属性: 实例 .right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; } 亲自试一试 »注释: 如果一个元素比包含它的元素高,并且它是浮动的,它将溢出其容器。您可以使用 clearfix hack 来解决此问题(请看下面的例子)。 clearfix hack 没有 Clearfix![]() ![]() 然后我们可以向包含元素添加 overflow: auto;,来解决此问题: 实例 .clearfix { overflow: auto;} 亲自试一试 » 垂直对齐 - 使用 padding有很多方法可以在 CSS 中垂直对齐元素。一个简单的解决方案是使用上下内边距: 我是垂直居中的。 实例 .center { padding: 70px 0; border: 3px solid green; } 亲自试一试 »如需同时垂直和水平对齐,请使用 padding 和 text-align: center;: 我是水平和垂直居中的。 实例 .center { padding: 70px 0; border: 3px solid green; text-align: center; } 亲自试一试 » 垂直对齐 - 使用 line-height另一个技巧是使用其值等于 height 属性值的 line-height 属性: 我是水平和垂直居中的。 实例 .center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center;}/* 如果文本有多行,添加以下内容: */.center p { line-height: 1.5; display: inline-block; vertical-align: middle;} 亲自试一试 » 垂直对齐 - 使用 position 和 transform如果您的选择不是 padding 和 line-height,则另一种解决方案是使用 position 和 transform 属性: 我是水平和垂直居中的。 实例 .center { height: 200px; position: relative; border: 3px solid green; }.center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} 亲自试一试 »提示: 在我们的 2D 转换 一章中,您将了解有关 transform 属性的更多信息。 垂直对齐 - 使用 Flexbox您还可以使用 flexbox 将内容居中。请注意,IE10 以及更早的版本不支持 flexbox: 我是水平和垂直居中的 实例 .center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; } 亲自试一试 »提示: 您将在我的 CSS Flexbox 这一章中学到更多关于 Flexbox 的知识。 CSS 习题和测验 测验 1 » 测验 2 » ❮ 上一节 下一节 ❯ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |