css使用float：right with vertical-align：middle

Question

我有2个div（在包装中），我用来显示照片和照片的标题并排垂直对齐为中间。

我遇到的问题是，当我尝试将照片向右浮动并将标题浮动到左侧时，标题和照片不再垂直对齐为中间。

似乎当我使用float时，vertical-align变为top。

如何添加花车并将垂直对齐保持为中间？我花了2个小时尝试我所知道的全部内容。我希望有人可以指出我做错了什么。

这是我的代码：

<div class="live_preview_top_header_wrapper">

    <div class="live_preview_top_header_title">Title</div>

    <div class="live_preview_top_header_photograph">

        <img id="id_name_details_photograph_01_live_preview" src="{{ name_details_photograph_url }}" />

    </div>

</div>


.live_preview_top_header_wrapper {
    width: 100%;
    background-color: #ffaaaa;
    vertical-align: top;
}

.live_preview_top_header_title {
    display: inline-block;
    background-color: #aaaaff;
    vertical-align: middle;
    float: left;
}

.live_preview_top_header_photograph {
    display: inline-block;
    background-color: #cc0033;
    vertical-align: middle;
    float: right;
}

Answer 1

尝试使用父Div中的Line-Height居中，并使用vertical-align：middle;关于内容，例如图像和标题。

Example

.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
line-height: 200px;
}  

.live_preview_top_header_wrapper {
width: 100%;
background-color: #ffaaaa;
line-height: 200px;
}

.live_preview_top_header_photograph {
display: inline-block;
background-color: #cc0033;
 float: right;
 line-height: 200px;
}

.live_preview_top_header_photograph img {
vertical-align: middle;
}