user1261774 user1261774 - 1 month ago 6
CSS Question

vertical align middle divs with float right & left

I have a user name and photograph that appears side by side and middle aligned, as shown below.

enter image description here

I am now trying to change the css so that the photo is dynamically floated to the left and the user name is dynamically floated to the right.

I have tried adding float: right and float left to the css but this only makes the photograph appear under the user name.

I have read several similar threads and tried many things, but I cannot solve this. It is really frustrating. It may be a simple fix, but I cannot see it.

Using CSS, how do I display the username on the right and the photo on the left and still have the user name and photo vertical-align: middle with a width of 100%? The photo that the user uploads can be different height, so I cannot use line-height.

Here is my HTML code:

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


Here is my css code:

.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

Here is one way of doing it using CSS3 transforms to take care of the vertical alignment of the name/title element.

I defined two classes, .flipLeft and .flipRight to control the placement of the name/title and the image elements.

I assumed that the image height will be as tall or taller than the height of the name/title, otherwise, things get more complicated.

The trick is to use the text-align property to place the image to the left or to the right of the parent block.

I then use absolute positioning to take the name/title element out of the content flow and pin it to the opposite edge of the parent block and adjust the top offset to 50% to get approximate vertical centering.

Finally, I use CSS3 transforms to adjust for the height of the name/title element.

Note: In the snippet below, scroll vertically to see both examples.

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