码农教程 - 一技在手,衣食无忧! tools

目录

CSS 布局 - 对齐

❮ 上一节 下一节 ❯

▲ ▼
◀ ►

中心元件
水平和垂直

居中对齐元素

要水平居中块元素（如 <div>），请使用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并把它做成一个block元素：

Paris

示例

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
亲自试一试 »

左对齐和右对齐 - 使用位置

对齐元素的一种方法是使用position: absolute;：

在我年轻、脆弱的时候，父亲给了我一些建议，从那时起我就一直在思考这些建议。

示例

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
亲自试一试 »

笔记：绝对定位的元素会从正常流中移除，并且可以与元素重叠。

左对齐和右对齐 - 使用浮动

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

示例

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
亲自试一试 »

清除修复黑客

笔记：如果一个元素比包含它的元素高，并且它是浮动的，它会溢出到其容器之外。您可以使用"clearfix hack" 来解决此问题（请参阅下面的示例）。

没有 Clearfix

与 Clearfix

然后我们可以将clearfix hack添加到包含元素来解决这个问题：

示例

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
亲自试一试 »

垂直居中 - 使用填充

在 CSS 中，有很多方法可以使元素垂直居中。一个简单的解决方案是使用顶部和底部padding：

我是垂直居中的。

示例

.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属性：

我是垂直和水平居中的。

示例

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
亲自试一试 »

垂直居中 - 使用位置和变换

如果padding和line-height不是选项，另一种解决方案是使用定位和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 变换章节。

垂直居中 - 使用 Flexbox

您还可以使用 Flexbox 将事物居中。请注意，IE10 及更早版本不支持 flexbox：

我是垂直和水平居中的。

示例

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
亲自试一试 »

提示：您将在我们的文章中了解有关 Flexbox 的更多信息CSS Flexbox 章节。

通过练习测试一下

练习:

使用 margin 属性确保 <div> 元素根据其父元素居中对齐。

<style>
.intro {
  width: 200px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

开始练习


❮ 上一节 下一节 ❯