CSS 布局 - 水平和垂直对齐

gtxyzz web技术 2022-07-06 772浏览 0

元素居中

水平和垂直居中的元素

————————————————————————

居中对齐元素

要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。

设置元素的宽度将防止其延伸到容器的边缘。

然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：

实例

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

这个 div 元素是居中的。

注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

——————————————————————————

居中对齐文本

如果仅需在元素内居中文本，请使用 text-align: center;：

实例

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

这段文本是居中的。

继续浏览有关 css 的文章