Question

第一：我想，像所有人一样，我喜欢这个页面！通常我可以在这里找到一切。不是这次。所以我会自己问。

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

Answer 1

您可以使用

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

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

Answer 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

Answer 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

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

3 个答案: