向右和向左浮动的 div 垂直居中对齐

Question

我有一个用户名和照片并排居中显示的样式，如下所示。

我现在想要更改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;
}

- user1261774

---

哥们，这通常很容易实现，但你的HTML结构真的很糟糕。 - connexo

Connexo，我需要做哪些更改？ - user1261774

实际上，我必须道歉。目前我甚至相信这并不可能，尽管听起来很简单。 - connexo

你能修改HTML吗？必须使用floats吗？如果不是，像这样做会简单得多，并且似乎可以达到你想要的效果：http://jsfiddle.net/Ltxjjd4k/1/ - Samuel Bradshaw

这必须是一种解决方案，其中图像可以从左到右更改而不更改标记，仅使用CSS。一旦您将图像浮动，此居中方法将不再起作用。 - connexo

Answer 1

以下是CSS3变换的一种方法，用于处理名称/标题元素的垂直对齐。 我定义了两个类.flipLeft和.flipRight来控制名称/标题和图像元素的位置。 我假设图像高度将与名称/标题的高度相同或更高，否则，事情将变得更加复杂。技巧在于使用text-align属性将图像放置在父块的左侧或右侧。 然后，我使用绝对定位将名称/标题元素从内容流中取出，并将其固定到父块的相反边缘，并调整top偏移量为50％以获得近似垂直居中。 最后，我使用CSS3变换来调整名称/标题元素的高度。请注意，在下面的片段中，垂直滚动以查看两个示例。

.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>

- Marc Audet

---

哇，这真是太棒了。 - james-see

Answer 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>

- Aramil Rey

---

请展示具有相同标记的两个版本（左侧和右侧）的内容。此外，请解释它是如何工作的。 - connexo

Answer 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属性。

- dsaket

---

请移除所有固定高度。您当前有 height: 150px;。整个块的高度只能取决于图像的（变量）高度。它必须适用于60x60、149x149、10x10等各种尺寸的图像。您明白了。 - connexo

Answer 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>

- james-see

---

好的，你的代码没有垂直居中文本。那是具有挑战性的部分。 - connexo

@connexo 哦，我明白了。如果我把它加回去，我会更新我的答案。 - james-see