基础 CSS 垂直标签

CSS 垂直标签是一种用于将 HTML 元素垂直对齐的技术。在 HTML 中，元素默认情况下是从上到下一个接一个排列的。CSS 垂直对齐技术允许您指定元素在垂直方向上的位置，使您的页面看起来更加优雅和整洁。

基础概念

display

display 属性可以指定元素在布局时如何显示。常用的值包括 block, inline, inline-block, flex, 和 grid。

• block 元素将在页面中生成新的块级元素，其后的元素将被放置在其下方。
• inline 元素将被视为行内元素，与文本类似。
• inline-block 元素将被视为行内元素，但可以设置宽度，高度和对齐方式等。
• flex 容器将子项（flex item）放置在一行/列中，并以不同的顺序进行布局。
• grid 容器将子项放置在行和列的可调节网格中。

margin

margin 属性可以指定元素周围的空白区域，用于分离元素与其周围的其他元素。

• margin-top 定义元素的顶部外边距。
• margin-right 定义元素的右边外边距。
• margin-bottom 定义元素的底部外边距。
• margin-left 定义元素的左边外边距。

vertical-align

vertical-align 属性可以指定元素在垂直方向上的对齐方式。

• baseline 将元素与相邻的第一个基线对齐。
• top 将元素与最高元素的顶部对齐。
• middle 将元素与最高元素和最低元素之间的中心对齐。
• bottom 将元素与最底部元素对齐。

实例

设置块级元素的垂直对齐方式

可以通过将 display 属性设置为 flex，以将块级元素垂直对齐。下面是一个基本的示例：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.item {
  margin: 10px;
  padding: 10px;
  background-color: #eee;
}

设置行内元素的垂直对齐方式

使用 vertical-align 属性可以在行内元素中设置垂直对齐方式。下面是一个基本的示例：

<p>
  <img src="image.png" alt=""> 文字
</p>

img {
  vertical-align: middle; /* 垂直居中 */
}

总结

CSS 垂直对齐可以让您更容易地控制页面元素的显示，从而使您的页面看起来更加整洁和专业。在进行网页设计工作时，您应该始终熟悉 CSS 垂直对齐技术，以便更好地控制您的页面元素。