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

Question

我有 2 个 div（在包装中），我用它们并排显示照片和照片的标题，vertical-align 作为中间。

我遇到的问题是，当我尝试将照片向右浮动并将标题向左浮动时，标题和照片不再vertical-align编为中间。

似乎当我使用浮动时，vertical-align 变成了顶部。

如何添加浮点数并将 vertical-align 保持在中间？ 我已经花了 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

尝试在 parent 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;
}

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

css using float: right with vertical-align: middle

html

css

position