行内块元素上下错位问题

最新推荐文章于 2024-01-18 22:05:07 发布

qq_39913441

最新推荐文章于 2024-01-18 22:05:07 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

文章标签：行内块上下错位问题

本文链接：https://blog.youkuaiyun.com/qq_39913441/article/details/95941168

本文探讨了行内块元素上下错位的原因，主要归因于浏览器默认的vertical-align属性值。通过设置CSS的vertical-align属性、使用浮动或者转换元素为块级元素，可以有效解决这个问题。示例中详细展示了对img和input元素应用vertical-align属性后的效果。

行内块元素上下错位问题

行内块上下错位的原因：

不同的标签，浏览器默认的对齐方式（vertical-align:baseline）不同，
比如图片默认顶对齐，文字默认底对齐。

所以当文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

解决方法：

添加vertical-align属性；
添加浮动float
将行内块元素改成块级元素，这样vertical-align对块级元素无效

vertical-align 属性设置元素的垂直对齐方式。

代码片.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内块元素上下错位问题</title>
		<style type="text/css">
			div{
				display:inline-block;
			}
			.div1{
				width: 200px;
				height: 300px;
				/* 为了方便观察，设置颜色 */
				background: red;
				/*vertical-align: bottom;*/
			}
			.div2{
				width:200px;
				height: 200px;
				/* 为了方便观察，设置颜色 */

				background: #0000FF;
				/*把元素的顶端与行中最低的元素的顶端对齐：*/
				/*vertical-align: bottom;*/

			}
		</style>
	</head>
	<body>
		<div class="div1">
			div1
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>

原图：
原图：对于div设置成的行内块元素，浏览器默认的对齐基准线

（即解决行内块元素上下错位的问题）：

代码片.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内块元素上下错位问题</title>
		<style type="text/css">
			div{
				display:inline-block;
			}
			.div1{
				width: 200px;
				height: 300px;
				/* 为了方便观察，设置颜色 */
				background: red;
				vertical-align: bottom;
			}
			.div2{
				width:200px;
				height: 200px;
				/* 为了方便观察，设置颜色 */

				background: #0000FF;
				vertical-align: bottom;

			}
		</style>
	</head>
	<body>
		<div class="div1">
			div1
		</div>
		<div class="div2">
			div2
		</div>
	</body>
</html>

（即解决行内块元素上下错位的问题）

vertical-align:bottom; 以下边为对齐基准线

对于img 和 input 行内块元素
代码片.

/*图片 img*/
.logoImg {
	position: relative;
	width: 200px;
	height: 39px;
	left: 15%;
	/*vertical-align: bottom;*/


}
/*input 输入框*/
.search>.search1 {
	position: relative;
	height: 29px;
	width: 200px;
	left: 55%;
	background: url(images/search2.jpg) right no-repeat;
	/*vertical-align: bottom;*/
}

原图：
在这里插入图片描述

代码片.

.logoImg {
	position: relative;
	width: 200px;
	height: 39px;
	left: 15%;
	vertical-align: bottom;


}

.search>.search1 {
	position: relative;
	height: 29px;
	width: 200px;
	left: 55%;
	background: url(images/search2.jpg) right no-repeat;
	vertical-align: bottom;
}