垂直对齐：从左到右浮动的对象的中间答案

【问题标题】：Vertical-align: middle for an object floated from left to the right垂直对齐：从左到右浮动的对象的中间
【发布时间】：2015-05-07 12:45:56
【问题描述】：

1st：我想，和大家一样，我喜欢这个页面！通常我可以在这里找到所有东西。但这次不是。那我自己问问吧。

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>

CSS

.img-wrap {
    float: right; 
}

.img-wrap img {
    height: 320px; width: 320px; background: grey; border-radius: 50%;
}

我正在尝试vertical-align:middle 图片旁边的文字。

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

直到现在，我都找不到不编辑结构的方法。

有人可以帮我吗？

JS Fiddle

【问题讨论】：

即使你不能改变 HTML，你仍然可以改变 CSS。只需将整个元素显示为内联元素（例如inline-block）并将它们垂直对齐到中间。

标签： html css floating

【解决方案1】：

你可以使用

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

https://jsfiddle.net/vuhynym8/2/

【讨论】：

首先谢谢！我有一个固定的文本高度，我也可以使用padding-top 让它垂直居中。但是 .text-height 是可变的。

【解决方案2】：

试试这个

CSS

.maindiv
    {
        float:right;
        text-align:right;
        width:80%;
    }
    .img-wrap {
        float: left; 
    }
    .img-wrap img {
        height: 320px; width: 320px; background: grey; border-radius: 50%;    
    }
    .text {
       float:left;
        width:30%;
       margin-top:100px;
        text-align:left;      
    }

和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>

here is fiddle

【讨论】：

不幸的是，文本长度是可变的。为此，简单的 margin-top 在这里不起作用。不过谢谢！

【解决方案3】：

如果无法更改此标记结构，请尝试将其添加到您的 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;
}

查看此fiddle

【讨论】：