一、文本框和表单按钮无法对齐问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框和表单按钮无法对齐问题</title>
<style>
input {
height: 50px;
/* 盒模型 自动内减 */
box-sizing: border-box;
/* 方法一:设置垂直对齐方式 */
vertical-align: bottom;
/* 方法二:设置浮动 */
/*float: left;*/
}
</style>
</head>
<body>
<input type="text"><input type="button" value="搜索">
</body>
</html>
二、input和img无法对齐问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
vertical-align: bottom;
}
</style>
</head>
<body>
<img src="./images/1.jpg"><input type="text">
</body>
</html>
三、div中的文本框,文本框无法贴顶问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
input {
vertical-align: top;
}
</style>
</head>
<body>
<div class="father">
<input type="text">
</div>
</body>
</html>
四、div不设高度由img标签撑开,此时img标签下面会存在额外间隙问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
background-color: pink;
}
img {
/* 解决方法一:改变img标签的垂直对齐方式不为baseline即可 */
vertical-align: bottom;
/* 解决方法二:设置img转换成块级元素 */
/* display: block; */
}
</style>
</head>
<body>
<div class="father">
<img src="./images/1.jpg" alt="">
</div>
</body>
</html>
五、使用line-height让img标签垂直居中问题
<!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 {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="father">
<img src="./images/1.jpg" alt="">
</div>
</body>
</html>
小提示:
- 学习浮动之后,不推荐使用行内块元素让div一行中显示,因为可能会出现垂直对齐问题
- 推荐优先使用浮动完成效果