如何使用浮动元素将元素的中心垂直放置

Question

我已经得到浮动图像和它的描述。
我想要divs，其中包含的描述被定位为中心垂直和周围的图像流动。这是我的代码。

.parent {
border: 1px red solid;
}
.parent:after, .parent:before {
content: "";
display: table;
clear: both;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
float: left;
}

<div class="parent">
<div class="left-child"></div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>

谁能帮我解决这个问题?

Answer 1

我向你推荐flex box

这里有一个很好的链接:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent {
border: 1px red solid;
display: flex;
align-items: center;
}

.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
}

<div class="parent">
<div class="left-child"></div>
<div class="right-child">
Insert your centered stuff here
</div>
</div>

Answer 2

设置parent显示属性为table，子属性为table-cell，您可以使用vertical-align属性将您的内容垂直居中对齐父属性:

.parent {
border: 1px red solid;
display: table;
overflow: hidden;
}
.parent:after, .parent:before {
content: "";
display: table;
clear: both;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
float: left;
}
.right-child {
display: table-cell; vertical-align: middle;
}

<div class="parent">
<div class="left-child"></div>
<div class="right-child">
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>  
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>