Html 垂直对齐：从左向右浮动对象的中间对齐

第一：我想，和大家一样，我喜欢这个页面！通常我在这里都能找到。但这次不行。所以我会自己问

HTML

<div>
<div class="img-wrap">
   <figure>
        <img src="http://www.porcelaingres.de/img/prodotti/collezioni/just_grey_dark_grey.jpg" style="">
   </figure>
</div>
<div class="text">
    <p>"Ich bin aus dem Dialogforum in der vergangenen Woche mit sehr viel Energie gegangen und werde die Themen meinen 20 Mitarbeitern unter anderem in unserer wöchentlichen Teamsitzung vermitteln."</p>
</div>

我正在尝试

垂直对齐：在图像旁边的文本中间对齐

到目前为止，我已经找到了答案，但我的问题是：
该结构是不可编辑的，图像是代码中首先提到的，但浮动到右侧（
float:right
）

直到现在，我还无法找到不编辑结构的方法

.text {
    overflow: hidden;
    height:320px; /* Equal height as of image */
}
.text:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.text p {
    display: inline-block;
    vertical-align: middle;
}

谁能帮帮我吗

您可以使用

.text{
  height: 320px;
  display: table-cell;
  vertical-align: middle;
}

试试这个

CSS

和html

<div class="maindiv">
    <div class="img-wrap">
       <figure>
            <img src="http://www.porcelaingres.de/img/prodotti/collezioni/just_grey_dark_grey.jpg" style="">
       </figure>
    </div>
    <div class="text">
        <p>"Ich bin aus dem Dialogforum in der vergangenen Woche mit sehr viel Energie gegangen und werde die Themen meinen 20 Mitarbeitern unter anderem in unserer wöchentlichen Teamsitzung vermitteln."</p>
    </div>
</div>


“我是一个对话论坛，它是一个充满活力和活力的论坛，在一个不知名的wöchentlichen团队中，它是一个20米长的机器人。”


如果此标记结构无法更改，请尝试将其添加到您的CSS

.text {
    overflow: hidden;
    height:320px; /* Equal height as of image */
}
.text:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.text p {
    display: inline-block;
    vertical-align: middle;
}

查看此
即使无法更改HTML，也可以更改CSS。只需将整个元素显示为内联级别的元素（例如，
内联块
），并将它们垂直对齐到中间。首先感谢！我有一个固定的文本高度，我还可以使用
填充顶部
使其垂直居中。但是.text高度是可变的。不幸的是，文本长度是可变的。对于这一点，简单的页边空白顶部在这里不起作用。但是谢谢！
.text {
    overflow: hidden;
    height:320px; /* Equal height as of image */
}
.text:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.text p {
    display: inline-block;
    vertical-align: middle;
}