使图像停留在部分的中心

Question

我制作了一个部分，分成两列。一个是写字，一个是画画。如何使图片在文本中心对齐。

如在图像的高度将与文本的高度对齐。

.intro {
margin-top: 3%;
}
.intro section {
display: inline-block;
width: 50%;
margin-top: 8%;
}
.intro img {
width: 200px;
float: right;
border-radius: 50%;
}

<div class='intro'>
<section>
<h2 class='intro-para'> I have been a science and maths tutor for the past three years and have tutored students of all abilites. I am very enthusastic about STEM and look to pass on some of that interest to my students. I offer one free session to each student so please
don't hesitate to get in contact. </h2>
</section>
<img class='ed' src=".//images/ed.jpeg">
</div>

• 我尝试过使用对齐项目中心
• 我尝试过使用justify内容

但我可能用错了！

Answer 1

align-items和justify-content是使用flexbox对齐内容时可以使用的属性。

确保图像的父级也具有display: flex，以便使用它们。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Answer 2

要将两个部分居中对齐，可以使用

vertical-align: middle;

html:

<section>
<img src="https://source.unsplash.com/random">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic odit rerum, eveniet magnam repellendus iusto. Praesentium incidunt eos nulla molestias laudantium, quo earum, ea quidem, officiis est voluptatibus perspiciatis facere.</p>
</section>

css：

*{
box-sizing: border-box;
}
section{
font-size: 0;
}
p, img{
width: 50%;
font-size: 16px;
display: inline-block;
vertical-align: middle;
padding: 0 10px;
}

这是一把正在工作的小提琴：https://jsfiddle.net/fueoyz1b/39/

另一种方法可能是使用其他答案中建议的flexbox。

Answer 3

您可以用另一个div包装您的两列并赋予它

display: flex;
align-items: center;