CSS 对齐学习笔记

在 CSS 中，对齐（Alignment）是一种调整元素位置的方式，它能够让我们更好地控制页面布局。在本文中，我们将学习一些常用的 CSS 对齐属性，以及它们在实际开发中的应用。

文本对齐

CSS 中的文本对齐属性可以用于调整块级元素内部文本的对齐方式。常用的文本对齐属性有：

• text-align: left;：文本左对齐
• text-align: center;：文本居中对齐
• text-align: right;：文本右对齐
• text-align: justify;：文本两端对齐（即分散对齐）

例如，下面的代码将一个段落内的文本居中对齐：

cssCopy Code
p {
  text-align: center;
}

水平对齐

CSS 中也存在一些属性可以用于调整元素的水平对齐方式。常用的水平对齐属性有：

• margin-left: auto; margin-right: auto;：水平居中对齐
• float: left;：元素向左浮动
• float: right;：元素向右浮动

例如，下面的代码将一个 div 元素水平居中对齐：

cssCopy Code
div {
  margin-left: auto;
  margin-right: auto;
}

垂直对齐

CSS 中也存在一些属性可以用于调整元素的垂直对齐方式。常用的垂直对齐属性有：

• vertical-align: top;：顶部对齐
• vertical-align: middle;：居中对齐
• vertical-align: bottom;：底部对齐

例如，下面的代码将一个 img 元素垂直居中对齐：

cssCopy Code
img {
  display: inline-block;
  vertical-align: middle;
}

实例

以下是一个实际的示例，展示了如何使用 CSS 对齐属性调整页面布局。

htmlCopy Code
<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <img src="example.jpg" alt="example">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et odio vitae ligula efficitur feugiat eu nec nulla. Curabitur vitae condimentum sapien. Vestibulum id dolor ex. Donec vel nibh eget magna convallis bibendum sed et quam. Ut eu nunc tristique, interdum est quis, aliquam magna. Ut ultricies non erat non semper. </p>
    <button>Learn More</button>
  </div>
  <div class="footer">Footer</div>
</div>

cssCopy Code
.container {
  width: 80%;
  margin: 0 auto;
}

.header, .footer {
  text-align: center;
  background-color: #ccc;
}

.content {
  display: flex;
  flex-direction: row;
}

img {
  display: inline-block;
  vertical-align: middle;
}

p {
  margin-left: 20px;
}

button {
  margin-left: auto;
}

在上面的示例中，我们使用了 text-align 属性将头部和底部区块内的文本居中对齐，并使用 display: flex; 和 flex-direction: row; 属性将内容区块内的元素水平排列。我们也使用了垂直对齐属性 vertical-align: middle; 将图片垂直居中对齐，并使用 margin-left: auto; 将按钮右对齐。最终，我们得到了以下的页面布局：