垂直对齐中间div与浮动左右

Question

我有一个并排显示的用户名和照片,如下图所示.

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

我尝试添加float:right并向左浮动到css但这只会使照片显示在用户名下.

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

使用CSS,如何在右侧显示用户名,在左侧显示照片,并且仍然具有用户名和照片vertical-align:middle,宽度为100%？用户上传的照片可以是不同的高度,所以我不能使用行高.

这是我的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;
}

Answer 1

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

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

我假设图像高度将高于或高于名称/标题的高度,否则,事情会变得更复杂.

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

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

最后,我使用CSS3变换来调整name/title元素的高度.

注意:在下面的代码段中,垂直滚动以查看这两个示例.

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