十九、CSS 布局之元素垂直对齐方式
站长
· 阅读数 3
浏览器 文字类型 元素排版中，存在用于对齐的 基线 ，一般情况下，默认是基线对齐，这就会产生一些元素对不齐、有缝隙之类的问题，面对这些问题，我们可以用垂直对齐方式来解决。
垂直对齐方式
我们在设置图文样式的时候，可以发现，当图片和文字在一行中显示时，其实它们的底部是不对齐的，对于这类问题，可以用 垂直对齐 方式来解决。
垂直对齐方式可以解决 行内 / 行内块 元素的垂直对齐问题，其属性名是 vertical-align，它有 4 个属性值：
- baseline ：基线对齐，默认值
- top ：顶部对齐
- middle ：中部对齐
- bottom ：底部对齐
项目中 vertical-align 可以解决的问题
（1）文本框和表单按钮无法对齐问题
可以看到下例中，搜索按钮稍微有点上移，与输入框没有对齐：
<body>
<input type="text" />
<input type="button" value="搜索" />
</body>
<style>
input {
height: 60px;
box-sizing: border-box;
}
</style>
在上例基础上，给元素设置垂直对齐方式：中部对齐
<body>
<input type="text" />
<input type="button" value="搜索" />
</body>
<style>
input {
height: 60px;
box-sizing: border-box;
vertical-align: bottom;
}
</style>
（2）input 系列和 img 图片无法对齐问题
<body>
<img src="./beijing1.jpeg" alt="">
<input type="text" />
</body>
<style>
input {
height: 60px;
box-sizing: border-box;
}
img{
width: 120px;
height: 120px;
}
</style>
给 img 标签设置垂直对齐：以底部垂直为例
<body>
<img src="./beijing1.jpeg" alt="">
<input type="text" />
</body>
<style>
input {
height: 60px;
box-sizing: border-box;
}
img{
width: 120px;
height: 120px;
vertical-align: bottom;
}
</style>
（3）div 中的文本框无法贴顶问题
<style>
div {
width: 240px;
height: 80px;
background-color: rgb(51, 242, 30);
}
</style>
<body>
<div>
<input type="text" />
</div>
</body>
给输入框设置垂直对齐方式：顶部对齐
<style>
div {
width: 240px;
height: 80px;
background-color: rgb(51, 242, 30);
}
input{
vertical-align: top;
}
</style>
</head>
<body>
<div>
<input type="text" />
</div>
</body>
（4）div 不设置高度，由图片撑开，此时图片标签下面会存在额外间隙问题
<style>
div {
width: 240px;
background-color: rgb(51, 242, 30);
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./beijing1.jpeg" alt="背景">
</div>
</body>
给图片设置垂直对齐方式：中间对齐
<style>
div {
width: 240px;
background-color: rgb(51, 242, 30);
}
img{
vertical-align: middle;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="./beijing1.jpeg" alt="背景">
</div>
</body>
浏览器会把行内标签和行内块标签当作文字处理，默认是基线对齐，对于上面的示例，还可以将图片标签转换成块级标签来实现，效果相同：
（5）使用行内高让图片标签居中问题
<style>
div {
width: 240px;
height: 200px;
line-height: 200px;
background-color: rgb(51, 242, 30);
}
img {
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<div>
<img src="./beijing1.jpeg" alt="背景" />
</div>
</body>
给图片设置垂直对齐方式：中间对齐
<style>
div {
width: 240px;
height: 200px;
line-height: 200px;
background-color: rgb(51, 242, 30);
}
img {
vertical-align: middle;
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<div>
<img src="./beijing1.jpeg" alt="背景" />
</div>
</body>
（6）水平、垂直都居中
<style>
div {
text-align: center;
width: 240px;
height: 200px;
line-height: 200px;
background-color: rgb(51, 242, 30);
}
img {
vertical-align: middle;
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<div>
<img src="./beijing1.jpeg" alt="背景" />
</div>
</body>
