浏览器 文字类型 元素排版中,存在用于对齐的 基线 ,一般情况下,默认是基线对齐,这就会产生一些元素对不齐、有缝隙之类的问题,面对这些问题,我们可以用垂直对齐方式来解决。
垂直对齐方式
我们在设置图文样式的时候,可以发现,当图片和文字在一行中显示时,其实它们的底部是不对齐的,对于这类问题,可以用 垂直对齐 方式来解决。
垂直对齐方式可以解决 行内 / 行内块 元素的垂直对齐问题,其属性名是 vertical-align
,它有 4 个属性值:
- baseline :基线对齐,默认值
- top :顶部对齐
- middle :中部对齐
- bottom :底部对齐
项目中 vertical-align 可以解决的问题
(1)文本框和表单按钮无法对齐问题
可以看到下例中,搜索按钮稍微有点上移,与输入框没有对齐:
HTML
<body>
<input type="text" />
<input type="button" value="搜索" />
</body>
<style>
input {
height: 60px;
box-sizing: border-box;
}
</style>
在上例基础上,给元素设置垂直对齐方式:中部对齐
HTML
<body>
<input type="text" />
<input type="button" value="搜索" />
</body>
<style>
input {
height: 60px;
box-sizing: border-box;
vertical-align: bottom;
}
</style>
(2)input 系列和 img 图片无法对齐问题
HTML
<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 标签设置垂直对齐:以底部垂直为例
HTML
<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 中的文本框无法贴顶问题
HTML
<style>
div {
width: 240px;
height: 80px;
background-color: rgb(51, 242, 30);
}
</style>
<body>
<div>
<input type="text" />
</div>
</body>
给输入框设置垂直对齐方式:顶部对齐
HTML
<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 不设置高度,由图片撑开,此时图片标签下面会存在额外间隙问题
HTML
<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>
给图片设置垂直对齐方式:中间对齐
HTML
<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)使用行内高让图片标签居中问题
HTML
<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>
给图片设置垂直对齐方式:中间对齐
HTML
<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)水平、垂直都居中
HTML
<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>