CSS常见问题：图文混排基线对齐

渣猫略懂

已于 2022-07-05 16:15:19 修改

阅读量455

点赞数

分类专栏：前端基础文章标签： html5 css html

于 2021-10-14 15:02:08 首次发布

本文链接：https://blog.csdn.net/weixin_52854090/article/details/120763782

版权

前端基础专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本文探讨了在HTML布局中，当未设置父元素高度且子元素包含图片时，由于基线对齐导致的上下白线问题。通过设置父元素的高度或调整子元素的vertical-align属性，可以有效地解决这一问题。示例代码展示了如何通过CSS实现图文的准确对齐，避免内容区域出现不必要的空白。

摘要由CSDN通过智能技术生成

未设置父标签或vertical-align的样式：

设置vertical-align的样式：

设置父元素高度的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 未设置父元素高度时父元素由内容撑开，设置内边距为0px
			 父元素应于内容高度一致，实际上下端有一条白线，是由基线对其问题造成的
			 解决方案1：给父元素添加固定高度
			 解决方案2：给子元素添加vertical-align属性*/
			div{
				border: 1px #000000 solid;
				padding: 0px;
				height: 420px;
			}
			img{
				/* vertical-align：默认值是baseline
				 其他值是top bottom middle px 百分比 em/rem
				 用于消除白边，对其基线*/
				/* vertical-align: middle; */
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<img src="../image/aaa.jpeg" >
			图文基线对齐
		</div>
	</body>
</html>

未设置父元素高度时父元素由内容撑开，设置内边距为0px
           父元素应于内容高度一致，实际上下端有一条白线，是由基线对其问题造成的
           解决方案1：给父元素添加固定高度
           解决方案2：给子元素添加vertical-align属性