文字图文混排如何垂直水平居中

我们在做前端的时候经常会编辑文章，由于SEO网站优化要求文章最好是图文并茂，因此经常需要将文章进行图文混排。左文字右图片，或者右图片左文字是很多前端经常使用的排版方式，通常的做法会是在div标签中嵌套两个div标签，并且两个div使用float:left，使其实现左右排版，但此方法虽然可以实现左右排版，但是CSS方面较为繁琐，经常遇到的问题则是左右排版实现了，但是文字无法随着图片的高度居中，或者图片无法随着图片的高度进行居中，我们可以使用以下代码轻松的实现文字图文混排垂直水平居中。

html代码部分

<div class="top">
<p>Ferro silicon is a gray color ferroalloy product which is made of iron and silicon. Different content of Si, Fe, Al, etc in Ferro silicon, different grade of ferro silicon, the most widely used is 75% ferro silicon and 72% ferro silicon . As we know that in the steelmaking industry, about 3-5 kg of 75% ferro silicon is consumed for every 1 ton of steel produced. Common particle sizes of ferro silicon are 0-3mm, 10-60mm, 10-100mm, etc. We are manufacturers of ferro silicon and can be customized according to user requirements.</p>
<img src="http://www.seoin.cn/static/upload/other/20240126/1706261663715013.webp" />
</div>

CSS代码部分

.top{display:flex;max-width:1080px;flex-wrap: wrap;align-items: center;text-align:center}
.top p,.top img{width: calc(50% - 30px);margin:0 15px;}

当然如果你是自适应网站，可以在css中利用@media  only screen and (max-width:960px){类样式}实现自适应，如果你有更好的方法欢迎留言沟通交流。