<div> 父容器内容器的 CSS 对齐方式

Question

我有一个父容器，它包含两个子容器，如下所示：

.contentcontainer {
width: 70%;
margin: 25px auto;
color: #61625B;
text-align: justify;
border-width: 1px;
border-color: red;
border-style: dashed;
}
.imagecontainer {
width: 45%;
float: right;
margin: 50px auto;
border-width: 1px;
border-color: blue;
border-style: dashed;
}
.imagecontainer>img {
max-width: 100%;
}
.content {
float: left;
width: 45%;
margin: 25px auto;
border-width: 1px;
border-color: green;
border-style: dashed;
}

<div class="contentcontainer">
<div class="content">
<h2>"title"</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget sem sit amet turpis aliquam mattis. Sed purus diam, eleifend vitae libero quis, scelerisque pharetra velit. Vestibulum id sem a risus tincidunt dignissim. Pellentesque porttitor a lectus
eu pellentesque. Quisque imperdiet magna non erat interdum tincidunt. Proin ac sem sem. Fusce dignissim scelerisque pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tristique mauris in urna
maximus scelerisque. Duis ut mi congue, bibendum ex in, rutrum ante. Sed dignissim diam ut nisi feugiat fermentum. Aenean ante metus, malesuada sit amet turpis in, congue dignissim enim.
</p>
<p>
Nullam a fermentum enim. Vestibulum nec vestibulum massa, quis interdum est. Fusce suscipit iaculis sem id facilisis. Sed imperdiet condimentum tortor at condimentum. Nullam rutrum leo quam, nec egestas risus elementum a. Morbi interdum enim vitae dictum
hendrerit. Aliquam cursus neque nec purus cursus tincidunt. Nunc feugiat justo eget nunc pretium, non posuere quam gravida. Curabitur dictum erat sit amet molestie cursus. Maecenas et nisi ut turpis condimentum euismod. Fusce placerat varius ornare.
Nulla a massa ullamcorper, venenatis urna eu, semper neque. Quisque lobortis malesuada feugiat. Fusce quis pharetra felis, a hendrerit urna.
</p>
</div>
<div class="imagecontainer">
<img src="img/myimg.jpeg" alt="img" />
</div>
</div>

此处添加边框只是为了可视化容器的位置。在大多数情况下，这是在做我想做的事情，唯一的问题是：由于在子容器中使用了float，父容器的实际高度为零。但是，我希望父容器跨越内容容器的实际高度，然后将图像容器垂直对齐到中间。我怎样才能做到这一点？

我已经尝试过简单地给.contentcontainer一个固定的min-height，但是.imagecontainer上的vertical-align: middle仍然不起作用。这又是因为使用了浮子吗？我如何在不使用浮子的情况下将两个容器并排放置？

JSFiddle的样本。

Answer 1

只需在父容器上添加这些设置(并擦除浮动(：

display: flex;
align-items: center

.contentcontainer {
width: 70%;
margin: 25px auto;
color: #61625B;
text-align: justify;
border-width: 1px;
border-color: red;
border-style: dashed;
display: flex;
align-items: center
}
.imagecontainer {
width: 45%;
margin: 50px auto;
border-width: 1px;
border-color: blue;
border-style: dashed;
}
.imagecontainer>img {
max-width: 100%;
}
.content {
width: 45%;
margin: 25px auto;
border-width: 1px;
border-color: green;
border-style: dashed;
}

<div class="contentcontainer">
<div class="content">
<h2>"title"</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget sem sit amet turpis aliquam mattis. Sed purus diam, eleifend vitae libero quis, scelerisque pharetra velit. Vestibulum id sem a risus tincidunt dignissim. Pellentesque porttitor a lectus
eu pellentesque. Quisque imperdiet magna non erat interdum tincidunt. Proin ac sem sem. Fusce dignissim scelerisque pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tristique mauris in urna
maximus scelerisque. Duis ut mi congue, bibendum ex in, rutrum ante. Sed dignissim diam ut nisi feugiat fermentum. Aenean ante metus, malesuada sit amet turpis in, congue dignissim enim.
</p>
<p>
Nullam a fermentum enim. Vestibulum nec vestibulum massa, quis interdum est. Fusce suscipit iaculis sem id facilisis. Sed imperdiet condimentum tortor at condimentum. Nullam rutrum leo quam, nec egestas risus elementum a. Morbi interdum enim vitae dictum
hendrerit. Aliquam cursus neque nec purus cursus tincidunt. Nunc feugiat justo eget nunc pretium, non posuere quam gravida. Curabitur dictum erat sit amet molestie cursus. Maecenas et nisi ut turpis condimentum euismod. Fusce placerat varius ornare.
Nulla a massa ullamcorper, venenatis urna eu, semper neque. Quisque lobortis malesuada feugiat. Fusce quis pharetra felis, a hendrerit urna.
</p>
</div>
<div class="imagecontainer">
<img src="img/myimg.jpeg" alt="img" />
</div>
</div>