Geek Answers Handbook

Align text vertically to the right of the floating image, resize images, respond

I would like to vertically align several lines of text to the right of the left floating image.

but

  • Image size (height and width) will be different and unknown in advance
  • The length of the text also changes and usually consists of several lines.
  • The solution should respond to different screen sizes.
  • Solutions should not include specific widths or px heights for images, divs, or anything else
    • I do not want to use tables, since the text will have to fall under the image in certain scenarios, when there is not enough space for the text next to the image.

I looked through the previous questions, but nothing at all matches what I'm looking for. It should work on any device, so I cannot use absolute px values ​​for any dimension.

How should I style the following to achieve this?

<img src="image.jpg" > <p>Here is the text that should go to the right of the image</p>

Thanks for any help.

+7
html css vertical-alignment
source share
1 answer

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

Basically, vertical-align:middle and display:inline-block are used for both p elements and img 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 a better approach using display:table / display:table-cell The same HTML ..

The jsFiddle example is semi-responsive ... Another jsFiddle example is 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; }

Another update using media queries

Obviously, you can use any breakpoints. I use 480px, as this is just an example. 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; } }
+10
source share

More articles:


All Articles