vertical-align 可以解决的问题

vertical-align 可以解决以下问题

1.文本框和表单按钮无法对齐问题
2.input和img无法对齐问题
3.div中的文本框，文本框无法贴顶问题
4.div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
5.使用line-height让img标签垂直居中问题

1.文本框和表单按钮无法对齐问题

问题图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input {height: 40px;/* 自动内减，使其高度一致 */box-sizing: border-box;}</style>
</head>
<body><input type="text"><input type="button" value="百度一下">
</body>
</html>

此时高度已经一致了，但还未对齐 ⬇
使用vertical-align顶部对齐使其对齐 ⬇

input {height: 40px;/* 自动内减，使其高度一致 */box-sizing: border-box;/* 1.垂直对齐方式 */vertical-align: top;}

此时已经对齐

2.input和img无法对齐问题

问题图

添加 vertical-align: bottom; 底部对齐

img {height: 100px;width: 100px;/* 底部对齐 */vertical-align: bottom;}

此时已经对齐

3.div中的文本框，文本框无法贴顶问题

问题图
给input标签加上 vertical-align: top;

.father {background-color: pink;width: 300px;height: 300px;}
input {/* 顶部对齐 */vertical-align: top;}

此时已经顶部对齐完成

4.div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

问题图
给img标签添加 垂直对齐 或者 转换为块级元素 都可解决间隙问题

img {/* 方法一、垂直对齐方式 */vertical-align: bottom;/* 方法二、转换为块级元素 */display: block;}

此时已经无间隙

5.使用line-height让img标签垂直居中问题

问题图（使用line-height无法让img完全垂直居中）

给 img 添加 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {background-color: pink;width: 600px;height: 600px;line-height: 600px;}img {height: 200px;width: 200px;/* 中部对齐 */vertical-align: middle;}</style>
</head>
<body><div class="father"><img src="./image/cxk.jpeg" alt=""></div></body>
</html>

此时已经垂直居中

vertical-align 可以解决的问题相关推荐

php垂直对齐,CSS垂直对齐不起作用的原因及解决方法
verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因我想很多人都会 ...
vue工程打包上线样式错乱问题 - bug解决（4种）
vue工程打包上线样式错乱问题 - bug总结(4种) 项目开发完成后,执行npm run build,进行打包,将打包完成的dist文件部署在服务器.配置好域名解析,就可以实现工程上线. 上线后,有 ...
Zabbix配置详解
为什么80%的码农都做不了架构师?>>> zabbix 配置了解 Hosts zabbix中的hosts就是指你想监控的设备,如服务器.工作站.交换机等等.如果你想监控某个主机 ...
highcharts 动态生成x轴和折线图
highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html><head><meta charset="utf-8" ...
块级元素（导航，图片，层）的水平和垂直居中
< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd> ...
CSS布局解决方案（终结版）
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环.在页面框架的搭建之中,又有居中布局.多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局. 居中布局水平居中 1)使用inli ...
你与数据科学家只差这26条python技巧
戳蓝字"CSDN云计算"关注我们哦! 作者 | Peter Gleeson 来源 | Python数据科学编译 | wLsq Python是目前世界上最流行的编程语言之一.因为: ...
如何调试CSS的跨浏览器样式bug
首先要做的是挑选一个好的浏览器.我的选择是Chrome,因为它拥有强大的调试工具.当我在Chrome上完成调试后,我会接着在Safari或者Firefox上调试. 如果在这些"好的" ...
css遮罩层从下往上_CSS:图片自带3px下边距的bug修复
有个朋友有这样一个需求,在一张图片上放置一个半透明的遮罩层,当鼠标悬停其上,减少遮罩的透明度,让图片显示更清晰,效果图如下: 简化HTML如下: Mask Text CSS样式文件如下: .item ...
如何在div中垂直对齐图像
如何在包含div内部对齐图像? 例在我的示例中,我需要使用class ="frame "将<img>在<div>垂直居中: <div class=& ...

vertical-align 可以解决的问题

vertical-align 可以解决以下问题

1.文本框和表单按钮无法对齐问题

2.input和img无法对齐问题

3.div中的文本框，文本框无法贴顶问题

4.div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

5.使用line-height让img标签垂直居中问题

vertical-align 可以解决的问题相关推荐

最新文章

热门文章

vertical-align 可以解决的问题

vertical-align 可以解决以下问题

1.文本框和表单按钮无法对齐问题

2.input和img无法对齐问题

3.div中的文本框，文本框无法贴顶问题

4.div不设高度 由img标签撑开，此时img标签下面会存在额外间隙问题

5.使用line-height让img标签垂直居中问题

vertical-align 可以解决的问题相关推荐

最新文章

热门文章

4.div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题