Vertically align text right of floated image, image sizes varied, responsive
I’d like to vertically align multiple lines of text to the right of a left-floated image.
- 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>
This will get you started: jsFiddle example - look below for a better method.
display:inline-block are used on both the
p and the
img elements for centering.
Here is better approach using
display:table-cell Same HTML..
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