图片随文字浮动

最新推荐文章于 2022-08-31 21:49:22 发布

啊黑啊

最新推荐文章于 2022-08-31 21:49:22 发布

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/qq_36257356/article/details/109745267

前端专栏收录该内容

14 篇文章

订阅专栏

该博客介绍了如何在文字字数不固定的情况下，使图片宽度固定并实现水平及垂直居中。通过将文本和图片置于同一容器，并利用CSS设置垂直居中和整体左移，达到图片随文字浮动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片随文字浮动

- 1.文字字数不固定，图片宽度固定（水平居中，垂直居中时）

1.文字字数不固定，图片宽度固定（水平居中，垂直居中时）

// An highlighted block
	<div class="address">
		   <p style="color: #5B8ED2;">文本浮动</p>
		   <img class="mypic" src="img/bg01.jpg"></img>
	</div>
    <style type="text/css">
			.address {
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 18px;
			}
			.mypic {
				width: 16px;
				height: 16px;
				margin-left: 5px;
			}
	</style>