垂直对齐中间 div，左右浮动答案

【问题标题】：vertical align middle divs with float right & left垂直对齐中间 div，左右浮动
【发布时间】：2016-10-17 01:38:22
【问题描述】：

我有一个用户名和照片，并排显示，中间对齐，如下所示。

我现在正在尝试更改 css，以便照片动态浮动到左侧，用户名动态浮动到右侧。

我尝试在 css 中添加 float: right 和 float left 但这只会使照片出现在用户名下。

我已经阅读了几个类似的主题并尝试了很多东西，但我无法解决这个问题。这真的很令人沮丧。这可能是一个简单的修复，但我看不到它。

使用 CSS，我如何在右侧显示用户名和在左侧显示照片，并且仍然有用户名和照片垂直对齐：宽度为 100% 的中间？用户上传的照片可以是不同的高度，所以我不能使用line-height。

这是我的 HTML 代码：

<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17">
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                {# image has max-height: 149px & max-width: 149px; assigned in the css file #}
                <img class="name_details_photograph_preview_dimensions" src="{{ image_url }}" />
            </div>
        </div>
    </div>
</div>

这是我的css代码：

.resumeStyleResumeTitleWrapper17 {
    display: table-cell;
    width: 100%;
}

.resumeStyleResumeTitle17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    display: table-cell;
    float: left;
    text-align: left;
    width: 100%;
}

.resumeStyleResumeTitleInner17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    display: table-cell;
    max-height: 149px;
    padding: 2px;
    text-align: left;
    vertical-align: middle;
    width: 100%;
}

.resumeStyleResumeTitleFontChange17 {
    direction: ltr;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.resumeStyleResumeTitlePhotograph17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    display: table-cell;
    max-height: 149px;
    max-width: 149px;
    padding: 2px;
    text-align: right;
    vertical-align: middle;
}

.resumeStyleResumeTitlePhotographInner17 {
    display: inline-block;
    vertical-align: middle;
}

.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
}

【问题讨论】：

伙计，这通常很容易实现，但你的 html 结构真的很烂。
connexo，我需要做出哪些改变？
其实我不得不道歉。目前我什至确信这是不可能的，尽管听起来很容易。
你能修改 HTML 吗？是否需要使用浮点数？如果没有，这样的事情要简单得多，似乎可以做你想做的事：jsfiddle.net/Ltxjjd4k/1
它必须是一个解决方案，图像可以从左到右更改而不更改标记，仅 CSS。一旦您浮动图像，这种居中方法就不再有效。

标签： html css css-float

【解决方案1】：

这是使用 CSS3 转换来处理名称/标题元素的垂直对齐的一种方法。

我定义了两个类，.flipLeft 和 .flipRight 来控制名称/标题和图像元素的位置。

我假设图像高度将与名称/标题的高度一样高或更高，否则事情会变得更加复杂。

诀窍是使用text-align 属性将图像放置在父块的左侧或右侧。

然后我使用绝对定位将名称/标题元素从内容流中取出，并将其固定到父块的相对边缘，并将 top 偏移调整为 50% 以获得近似垂直居中。

最后，我使用 CSS3 转换来调整名称/标题元素的高度。

注意：在下面的 sn-p 中，垂直滚动以查看两个示例。

.resumeStyleResumeTitleWrapper17 {
    display: block;
    width: auto;
    border: 1px dotted blue;
}
.resumeStyleResumeTitle17 {
    background-color: #000;
    color: #fff;
    position: relative;
}
.resumeStyleResumeTitleFontChange17 {
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
}
.resumeStyleResumeTitlePhotograph17 {
    border: 1px dotted yellow;
    display: inline-block;
    vertical-align: top;
}
.resumeStyleResumeTitlePhotographInner17 {
}
.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
    display: block;
}
.flipLeft.resumeStyleResumeTitle17 {
    text-align: left;
}
.flipLeft .resumeStyleResumeTitleInner17 {
    border: 1px dotted yellow;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.flipRight.resumeStyleResumeTitle17 {
    text-align: right;
}
.flipRight .resumeStyleResumeTitleInner17 {
    border: 1px dotted yellow;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

<h2>Flip Image to Left</h2>
<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17 flipLeft">
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                <img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
            </div>
        </div>
    </div>
</div>

<h2>Flip Image to Right</h2>
<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17 flipRight">
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                <img class="name_details_photograph_preview_dimensions" src="http://placehold.it/140x100" />
            </div>
        </div>
    </div>
</div>

【讨论】：

哇。这太棒了。

【解决方案2】：

使用float 无法实现，但我使用display: flex; 获得了所需的布局

JS Fiddle

div.container {
    display: flex;
    width: 100%;
    align-items: center;
    background-color: black;
    height: 100px;
    padding: 20px 0;
}
div.user_name {
    display: flex;
    font-size: 32px;
    font-family: Helvetica;
    color: white;
    width: 50%;
    padding-left: 20px;
}
div.user_img {
    display: flex;
    justify-content: flex-end;
    width: 50%;
    height: 100%;
    padding-right: 20px;
}

div.user_img > img {
    height: 100%!important;
    width: auto;
}

<div class="container">
    <div class="user_name">User Name</div>
    <div class="user_img">
        <img src="http://www.lessons4living.com/images/penclchk.gif"/>
    </div>
</div>

【讨论】：

请使用相同的标记显示两个版本。（左图和右图）另外，请解释它是如何工作的。

【解决方案3】：

找到解决此问题的方法，将您的 HTML 更新为以下内容，

<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17">
        <div class="resumeStyleResumeTitlePhotograph17">
            <div class="resumeStyleResumeTitlePhotographInner17">
                <img class="name_details_photograph_preview_dimensions" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTWd99Qkjbg4ZVu-XHvaIo4LX1MittAmD0CvsiN6QcYeuv4XOQm" />
            </div>
        </div>
        <div class="resumeStyleResumeTitleInner17">
            <div class="resumeStyleResumeTitleFontChange17">User Name</div>
        </div>
    </div>
</div>

在 CSS 中，

.resumeStyleResumeTitleWrapper17 {
    width: 100%;
}

.resumeStyleResumeTitle17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    float: left;
    text-align: left;
    width: 100%;
    height: 150px;
}

.resumeStyleResumeTitleInner17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    max-height: 149px;
    padding: 2px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.resumeStyleResumeTitleFontChange17 {
    direction: ltr;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.resumeStyleResumeTitlePhotograph17 {
  background-color: #000;
  color: #fff;
  direction: ltr;
  max-height: 149px;
  max-width: 149px;
  text-align: right;
  vertical-align: middle;
  display: inline-block;
}

.resumeStyleResumeTitlePhotographInner17 {

}

.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
}
.resumeStyleResumeTitle17:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -2px;
}

基本上我添加了一个.resumeStyleResumeTitle17:before 元素，它的作用就像一个幽灵元素，占据整个高度，并允许每个相邻元素通过display:inline-block 对齐，现在vertical-align:middle 属性适用。

【讨论】：

请移除所有固定高度。您目前拥有height: 150px;。整个块的高度可能仅取决于图像的（可变）高度。它必须适用于 60x60、149x149 和 10x10 的图像，而且......你明白了。

【解决方案4】：

好的，这是为您指明正确的方向，但很明显您并不真正了解正在发生的事情。你有太多的 div 和类上的非常糟糕的命名结构。以下是我如何在不删除 div 并重新开始的情况下使其朝着您想要的方向工作的方法（否则我会这样做）：（这是直播的jsfiddle）。

<!DOCTYPE HTML>
<style>
    .resumeStyleResumeTitleWrapper17 {
    position:relative;
    width: 100%;
    display:block;
    background-color: #000;
    height:175px;
}

.resumeStyleResumeTitle17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    text-align: left;
    width: 100%;
}

.resumeStyleResumeTitleInner17 {
    background-color: #000;
    color: #fff;
    direction: ltr;
    float:right;
    width: 100%;
}

.resumeStyleResumeTitleFontChange17 {
    font-size: 32px;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
    float:right;
}

.resumeStyleResumeTitlePhotograph17 {
    background-color: #000;
    color: #fff;
    direction: ltr;

}

.resumeStyleResumeTitlePhotographInner17 {
    float:left;
    height:175px;
}

.name_details_photograph_preview_dimensions {
    max-height: 149px;
    max-width: 149px;
}
</style>
<div class="resumeStyleResumeTitleWrapper17">
    <div class="resumeStyleResumeTitle17">
        <div class="resumeStyleResumeTitleInner17">
            <span class="resumeStyleResumeTitleFontChange17">User Name</span>
        </div>
        <div class="resumeStyleResumeTitlePhotograph17">
                <!-- image has max-height: 149px & max-width: 149px; assigned in the css file -->
                <img class="name_details_photograph_preview_dimensions" src="http://www.lessons4living.com/images/penclchk.gif" />
        </div>
    </div>
</div>
</html>

【讨论】：

好吧，您的代码没有垂直居中文本。那是具有挑战性的部分。
@connexo 啊我明白了。如果我重新添加，我会更新我的答案。