How to vertical align text next to dynamic width image on varying browser widths?

Question

I have a problem I have been trying to solve for a long time.

I have a responsive site, where I need to align a banner image and a text next to it. The banner image's max width is 1170px, but any size of image can be uploaded, so we have to force the max width by CSS.

It should look like something like this. The text should be vertical centered, and should fill the available space left by the image.

The problems arise when I have an image that is too big. In smaller screen sizes I cannot force the image to decrease it's size depending on the available screen size, so it will just overflow out of the screen.

It has to work until about 700px browser width. After that we have a breakpoint that forces the text to a new line, so we don't have this problem anymore.

So, the main points: The image's width is unknown, the amount of text is unknown (max 170 characters). The site is responsive, the max available space is 1170px, but it descreases as you make the browser window smaller.

Here is the relevant SASS code:

.logo img {
    max-width: 1170px;
}
.logo, .logo-text {
    text-align: center;
}
.logo-text {
    font-weight: 700;
}
@media all and (min-width: breakpoint(4)) {
    .logo {
        @include flex(none);
        @include ie8 {
            width: 1px;
        }
        @include ie9 {
            width: 1px;
        }
    }
    .logo, .logo-text {
        text-align: left;
        @include ie8 {
            display: table-cell;
            vertical-align: middle;
        }
        @include ie9 {
            display: table-cell;
            vertical-align: middle;
        }
        margin-bottom: 0;
    }    
    .logo-wrapper {
        @include ie8 {
            display: table;
        }
        @include ie9 {
            display: table;
        }
        @include display(flex);
        @include flex-direction(row);
        @include flex-wrap(nowrap);
        @include align-items(center);
    } 
    .logo-text {
        -ms-flex: 0 1 auto; //IE10 hack to wrap the text
    }
}

Here is the relevant HTML code:

<div class="logo-wrapper">
                <div class="logo">
                    <img src="https://xy.com/.png" alt="Logo">
                </div>
                <p class="logo-text" style="color: #FFF;">

                    This is a test This is a test This is a test This is aThis is a test This is a test This is a test This is a

                </p>

            </div>

It has to work in IE8+ and other major browsers!

This code have worked when the image's max width was 230px. But now it has to be increased to 1170px.

Please show us what you've already done in the process of trying to accomplish this. — Steyn, Oct 22 '15 at 07:40
Why can't you force the image to be smaller on small size windows? — Florin Pop, Oct 22 '15 at 07:40

Adam Tomat · Answer 1 · 2015-10-22T09:08:50.330

2

You're already using table-cell to center them, so I'd say you don't need flex on there too. You have no problems of support with table-cell either http://caniuse.com/#feat=css-table

This should be all the css need to get it functionally working:

@media all and (min-width: 500px) {
    .logo-wrapper {
        display: table;
    }

    .logo-text, .logo {
        display: table-cell;
        vertical-align: middle;
    }

    .logo {
        padding-right: 25px;
        max-width: 1170px;
    }
}

Also, it may be easier to make sure the image is block and has a max width of 100% and let it's parent dictate the width

.logo img {
    max-width: 100%;
    display: block;
}

Here's a JS fiddle: https://jsfiddle.net/2crhLc9a/13/

Update

To fix the issue mentioned in the comments about Firefox and IE8 not obeying the max-width, I used the solution from this post: http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

Basically, added the following too .logo-wrapper:

.logo-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
}

I also added some hacky inline css for IE8 too, as it doesn't support media queries. I updated the fiddle above with the new code.

edited Oct 22 '15 at 09:08

answered Oct 22 '15 at 08:09

Adam Tomat

10,466
6
34
46

Your answer is really helpful, but unfortunately IE8 does not respect the max-width. Really wide images will just overflow and make the page scroll horizontally – Relevart Oct 22 '15 at 08:32
Actually, the width isn't even respected in the latest firefox. Produces the same effect as IE :) – Relevart Oct 22 '15 at 08:42
1

Indeed you're right. I've had a play and found a solution that seems to do the trick although jsfiddle in IE8 is a pain. – Adam Tomat Oct 22 '15 at 09:05
Thank you for the update! Unfortunately there is still an issue. When the image is small, the text is not immediately on it's right, but in the middle. I guess this is the result of the fixed width. Sorry, I did not mention this requirement in my question. – Relevart Oct 22 '15 at 09:32
Do you mean if the image width is less than 1170px? – Adam Tomat Oct 22 '15 at 10:00
Yes, for example the image is 200px – Relevart Oct 22 '15 at 11:14
Sure thing. Depends on what you want to happen. Probably want to avoid scaling the image up as it could become blurry. You could just float the image right, so it always sits next to the text. Having the text the same width as the image is much trickier (can't think of a way to do that off the top of my head) – Adam Tomat Oct 22 '15 at 12:41

score 0 · Answer 2 · edited May 23 '17 at 11:44

What you want is vertical align the image in the container which contains both the image and the text. Then vertically align the image in its parent is:

position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

Element could've been relative if the height of the parent was set, which is not the case.

In my experience it works in many situations and on all major browsers (even IE9+).

If you use SCSS, you might even like to implement this mixin:

@mixin v-align($position: absolute){
    position: $position;  top: 50%;  
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE */
    -moz-transform:translateY(-50%); /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
    -o-transform:translateY(-50%);
}

This fiddle is with position absolute:

https://jsfiddle.net/fhzo162p/1/

I see you added "Has to work with IE8". This makes it a whole different story. Maybe there is an answer here: How to vertically center content of child divs inside parent div in a fluid layout but you can always hack it with javascript for those on IE8.

score 0 · Answer 3 · answered Oct 22 '15 at 07:43

0

I think the simplest solution is to make the image responsive also with the size of the browser. Here is sample fiddle

CSS

img {
    width: 80%; // you change it depends on what you want.
}

answered Oct 22 '15 at 07:43

rick jan cawaling

420
3
10

How to vertical align text next to dynamic width image on varying browser widths?

3 Answers3

Update