CSS - 对齐

上一页
下一页

在网页设计和 CSS 的上下文中，术语对齐是指布局中元素或内容的定位和安排，通常与特定的准则或参考点有关。对齐用于通过确保元素彼此相对放置或以一致和谐的方式相对于布局结构放置，从而创建视觉上令人愉悦且有序的设计。

对齐可以应用于各种类型的元素，包括文本、图像、按钮等，以创建有凝聚力和精美的设计。CSS 提供了各种属性，可用于对齐元素。

对齐有两个主要方面：

水平对齐：这是指元素沿水平轴的定位，通常从左到右。常见的水平对齐选项包括：
  • 左对齐：元素与容器或布局的左侧对齐。
  • 居中对齐：元素水平放置在容器或布局的中心。
  • 右对齐：元素与容器或布局的右侧对齐。
垂直对齐：这是指元素沿垂直轴的定位，通常从上到下。常见的垂直对齐选项包括：
  • 顶部对齐：元素与容器或布局的顶部对齐。
  • 中间对齐或居中对齐：元素在容器或布局中垂直居中。
  • 底部对齐：元素与容器或布局的底部对齐。

CSS Align - position 属性

有几种方法可以将元素向左对齐。让我们看看实现这一目标的几种方法。

通过使用 CSS position 属性，可以调整元素的对齐方式。

以下是使用位置设置对齐的示例：


<html>
<head>
<style>
	 	.right-alignment {
	 	 	 position: absolute;
	 	 	 right: 0px;
	 	 	 width: 100px;
	 	 	 border: 3px solid #0d1601;
	 	 	 background-color: rgb(244, 244, 135);
	 	 	 padding: 10px;
	 	}
	 	.left-alignment {
	 	 	 position: relative;
	 	 	 left: 0px;
	 	 	 width: 100px;
	 	 	 border: 3px solid #0c1401;
	 	 	 background-color: blanchedalmond;
	 	 	 padding: 10px;
	 	}
	 	.center-alignment {
	 	 	 margin: auto;
	 	 	 border: 3px solid black;
	 	 	 padding: 5px;
	 	 	 background-color: rgb(241, 97, 126);
	 	 	 width: 120px;
	 	 	 position: relative;
	 	}
</style>
</head>
<body>
	 	<div class="right-alignment">
	 	 	 <h3>Right align</h3>
	 	 	 <strong>Right align with position:absolute</strong>
	 	</div>
	 	<div class="left-alignment">
	 	 	 <h3>Left align</h3>
	 	 	 <strong>Left align with position:relative</strong>
	 	</div>
	 	<div class="center-alignment">
	 	<h3>Center align</h3>
	 	<strong>Vertically & horizontally centered using position:relative and margin:auto.</strong>
	 </div>
</body>
</html>

注意：绝对定位的元素将从正常流动中移除，并且可以与元素重叠。

CSS Align - float 属性

通过使用 CSS 属性 float，可以调整元素的对齐方式。

以下是使用 float 设置对齐方式的示例：


<html>
<head>
<style>
	 	.right-alignment {
	 	 	 float: right;
	 	 	 width: 100px;
	 	 	 border: 3px solid #0d1601;
	 	 	 background-color: rgb(244, 244, 135);
	 	 	 padding: 10px;
	 	}
	 	.left-alignment {
	 	 	 float: left;
	 	 	 left: 0px;
	 	 	 width: 100px;
	 	 	 border: 3px solid #0c1401;
	 	 	 background-color: blanchedalmond;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
	 	<div class="right-alignment">
	 	 	 <h3>Right align</h3>
	 	 	 <strong>Right align with float:right</strong>
	 	</div>
	 	<div class="left-alignment">
	 	 	 <h3>Left align</h3>
	 	 	 <strong>Left align with float:left</strong>
	 	</div>
</body>
</html>

CSS Align - text-align 属性

要对齐元素内的文本，请使用属性 text-align。

下面是一个在 <div> 元素内对齐文本的示例：


<html>
<head>
<style>
	 	div {
	 	 	 width: 300px;
	 	 	 border: 3px solid #0d1601;
	 	 	 padding: 10px;
	 	 	 margin-bottom: 1cm;
	 	}
	 	.right-alignment {
	 	 	 text-align: right;	
	 	 	 color:red;
	 	}
	 	.left-alignment {
	 	 	 text-align:left;
	 	 	 color:green;
	 	}
	 	.center-alignment {
	 	 	 text-align: center;
	 	 	 color:blue;
	 	}
</style>
</head>
<body>
	 	<div class="right-alignment">
	 	 	 <h3>Right align</h3>
	 	 	 <strong>Text right aligned</strong>
	 	</div>
	 	<div class="left-alignment">
	 	 	 <h3>Left align</h3>
	 	 	 <strong>Text left aligned</strong>
	 	</div>
	 	<div class="center-alignment">
	 	 	 <h3>Center align</h3>
	 	 	 <strong>Text center aligned</strong>
	 	</div>
</body>
</html>

CSS Align - padding 属性

可以使用 CSS padding 属性将一段文本垂直居中。


<html>
<head>
<style>
	 	.center-alignment {	
	 	 	 padding: 100px 0;
	 	 	 border: 3px solid black;	
	 	 	 margin: 5px;
	 	 	 background-color: lightblue;
	 	}
</style>
</head>
<body>
	 	<div class="center-alignment">
	 	 	 <p>Vertically centerd using padding.</p>
	 	</div>
</body>
</html>

CSS 对齐 - 居中文本

下面是一个示例，如果您想将文本垂直居中和水平，则需要使用 text-alignt：center 和填充：


<html>
<head>
<style>
	 	.center-alignment {	
	 	 	 padding: 100px 0;
	 	 	 text-align: center;
	 	 	 border: 3px solid black;	
	 	 	 margin: 5px;
	 	 	 background-color: lightblue;
	 	}
</style>
</head>
<body>
	 	<div class="center-alignment">
	 	 	 <p>Vertically & horizontally centerd using padding and text-align properties.</p>
	 	</div>
</body>
</html>

CSS Align - justify-content 属性

如果您想使用 flex 和 justify-content 属性将文本垂直居中，下面是一个示例：


<html>
<head>
<style>
	 	.center-alignment {
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 300px;
	 	 	 border: 3px solid black;	
	 	 	 font-size: larger;
	 	 	 background-color: lightblue;
	 	}
</style>
</head>
<body>
	 	<div class="center-alignment">
	 	 	 <p>Vertically & horizontally centered using flex and justify-content.</p>
	 	</div>
</body>
</html>

CSS Align - 相关属性

下表列出了与对齐方式相关的所有属性：

属性 描述
align-content 沿交叉轴或网格的块轴对齐 Flex 容器的内容。.
align-items 控制 Flex 容器的项沿十字轴的对齐。
align-self 控制容器中单个项的对齐方式。
vertical-align 确定内联、内联块或表格单元格文本的垂直对齐方式。.
line-height 设置文本行之间的距离。
text-align 设置内联、内联块或表格单元格文本的水平对齐方式。
margin 可以修改对齐方式的边距值的简写。
打印本页
上一页
下一页