Vertically align text right of floated image, image sizes varied, responsive

Question

I'd like to vertically align multiple lines of text to the right of a left-floated image.

However

• The image size (height and width) will vary and is unknown in advance
• The length of text varies also and will usually comprise multiple lines
• Solution needs to be responsive to adapt to varied screen sizes
• Solutions should not involve specific px width or height dimensions for images, divs or anything else
  • I don't want to use tables as the text will need to drop underneath the image in certain scenarios when there isn't enough room for the text beside the image

I've looked back through previous questions but nothing quite matches what I am looking for. It needs to work on any device so I can't use absolute px values for any dimension.

How should I style the following to achieve that?

<img src="image.jpg" >

<p>Here is the text that should go to the right of the image</p>

Thanks for any help.

Answer 1

This will get you started: jsFiddle example - look below for a better method.

Basically, vertical-align:middle and display:inline-block are used on both the p and the img elements for centering.

HTML

<div class="element">
    <img src="http://placehold.it/150x150"/>
    <p>Lorem Ipsum is simply dummy text </p>
</div>

CSS

.element {
    background:rgb(134, 226, 255);
    margin:10px;
}
p {
    display:inline-block;
    margin:0px;
    width:70%;
    background:white;
    vertical-align:middle;
}
img {
    display:inline-block;
    vertical-align:middle;
}

---

Here is better approach using display:table/display:table-cell Same HTML..

jsFiddle example - semi-responsive... Other jsFiddle example - responsive img elements..

CSS

.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}

---

Yet another update using media queries

You could obviously use whatever breakpoints you want. I use 480px, as this is just for example purposes. Try resizing the window. jsFiddle example

CSS

@media only screen and (min-width: 480px) {
.element {
    width:100%;
    display:table;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    display:table-cell;
    height:100%;
    vertical-align:middle;
    background:white;
}
img {
    display:table-cell;
    width:100%;
    height:auto;
}
}
@media only screen and (max-width: 479px) {
.element {
    width:100%;
    background:rgb(134, 226, 255);
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
p {
    background:white;
}
img {
    width:50%;
    margin:0px auto;
    display:block;
    height:auto;
}
}