css 使用 float: right 和 vertical-align: middle答案

【问题标题】：css using float: right with vertical-align: middlecss 使用 float: right 和 vertical-align: middle
【发布时间】：2015-04-29 12:11:02
【问题描述】：

我有 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;
}

【问题讨论】：

你想要垂直的屏幕中间还是 div 的中间？
ketan，div 的垂直中间。

标签： html css position

【解决方案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;
}

【讨论】：