首页 技术文章 css

css垂直底对齐

发布日期: 2024-05-16
FontSize: 【小 中 大】
css垂直底对齐

说到垂直对齐，首先会想到vertical-align，如果您使用的是table，这个属性相当好用及有效，但时至今日，使用table来布局的应该几乎没有了，table更适用于存放数据。

关于vertical-align属性

vertical-align属性在CSS中用于设置行内元素（如<span>、<img>等）或表格单元格的垂直对齐方式。如果vertical-align属性对您的元素不起作用，可能有以下原因：

元素不是行内元素：vertical-align属性仅适用于行内元素。如果您尝试将其应用于块级元素（如<div>），它将不起作用。

元素未设置为表格单元格：vertical-align属性也可以应用于表格单元格（<td>），但仅在元素位于表格中时才有效。

父元素未设置为表格：如果您尝试将vertical-align应用于表格单元格，但父元素未设置为表格，则该属性将不起作用。

使用了浮动或绝对定位：如果元素使用了浮动（float）或绝对定位（position: absolute），vertical-align属性可能不起作用。

vertical-align解决方案

建议放弃vertical-align，如果非必要，有更好的方案来解决垂直对齐的问题。

示例1：

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
	display: flex;
	align-items: flex-end;
	height: 100px;
	background: #eee;
}
</style>
</head>
<body>
<div class="parent">
	<div class="text">css垂直底对齐</div>
</div>
</body>
</html>

上面示例中，.text元素相对于.parent元素，垂直底对齐，需要将父元素.parent设置为display: flex;align-items: flex-end;

关于align-items属性

align-items是CSS Flexbox布局中的一个属性，用于控制flex容器中项目在交叉轴（cross axis）上的对齐方式。交叉轴是与主轴（main axis）垂直的轴，主轴用于排列flex项目。

一些主要的属性值说明：

属性值 值说明
stretch 如果未设置高度或设为auto，则拉伸项目以填充容器的整个交叉轴。这是默认值。
flex-start 沿交叉轴的起始边缘对齐，即垂直顶对齐。
flex-end 沿交叉轴的结束边缘对齐，即垂直底对齐，见示例1。
center 在交叉轴上居中对齐，即垂直居中对齐。
baseline 根据其基线对齐。对于文本，这意味着所有项目的第一行文本基线对齐。

您可以在示例1中更改属性值查看更多的效果。

如今，flex布局已经被各大浏览器支持，得到了广泛的使用，建议使用flex布局，使用align-items设置元素垂直对齐。

关于垂直对齐的其它解决方案

示例2：

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
	box-sizing: border-box;
	padding-top:86px;
	font-size:14px;
	height: 100px;
	background: #eee;
}
</style>
</head>
<body>
<div class="parent">
	<div class="text">css垂直底对齐</div>
</div>
</body>
</html>

利用padding属性来实现垂直底对齐。

示例3：

<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
	box-sizing: border-box;
	font-size:14px;
	height: 100px;
	line-height: 180px;
	background: #eee;
}
</style>
</head>
<body>
<div class="parent">
	<div class="text">css垂直底对齐</div>
</div>
</body>
</html>

利用line-height属性来实现垂直底对齐。

相对示例1，示例2与示例3原则上并不算是垂直底对齐，实际运用中使用的也较少。在实际运用中，padding多用于调整两个版块内容上下间距离，line-height主要用于文本行间垂直居中以及调整文本段落中两行文本之间的垂直距离。

flex css css3