Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical align an image and a multiline text

I´m trying to align an image and a text vertically:

 +-------------------------+ -- Viewport |         Text text text  |  | +-----+ text text text  |  | |IMAGE| text text text  |  | +-----+ text text text  |  |         text text text  |  +-------------------------+  

This works fine, if the text is not wrapped. If the Text is wider than the viewport-width, it does not work anymore. I think this is caused by setting display: inline-block:

<a href="#">     <img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" />      <span style="display: inline-block; vertical-align: middle;">         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore      </span> </a> 

The result:

 +---------------------------------------------------------------------+ -- Viewport |                                                                     |                                                             | +-----+                                                             |  | |IMAGE| text text text text text text text text text text text text |  | +-----+                                                             |                                                            |                                                                     |  +---------------------------------------------------------------------+   +-------------------------+ -- Viewport | +-----+ Text text text  |  | |IMAGE| text text text  |  | +-----+ text text text  |  | text text text text     |  +-------------------------+  

If I try to float the elements, the image will always be on top, but not vertical-aligend in the middle of the text:

    <a href="#">         <img style="display: block; vertical-align: middle;  margin-right: 8px; float: left;" src="/images/arrow_black.png" />          <span style="display: block; overflow: auto;">              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.          </span>      </a> 

The result:

 +-------------------------+ -- Viewport | +-----+ Text text text  |  | |IMAGE| text text text  |  | +-----+ text text text  |  |         text text text  |  |         text text text  |  |         text text text  |  +-------------------------+  

I´ve seen several solutions for this problem, using html-tables or css-tables (display: table and display: table-cell), but this is not an option, because it must work with all types of browsers (desktop and mobile).

To that, I do not know any sizes. Neither of the image nor of the text. So I can't use any "margin- or padding-Solution".

EDIT: I´ve created a demo-fiddle (based on the one NGLN has created, BTW: Thanks for that!) that show the result i´m looking for. But I try to archive this without using display: table-cell... any ideas?

like image 757
bceo Avatar asked Jun 29 '11 16:06

bceo


People also ask

How do I vertically align text and an image?

We need to create a parent element that contain both image and text. After declaring the parent element as flexbox using display: flex; we can align the items to the center using align-items: center;. Example: This example uses flexbox to vertically align text next to an image using CSS.

How do you align a image along with the text in HTML?

An <img> element is an inline element (display value of inline-block ). It can be easily centered by adding the text-align: center; CSS property to the parent element that contains it. To center an image using text-align: center; you must place the <img> inside of a block-level element such as a divdivThe HTML division tag, called "div" for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content.https://www.freecodecamp.org › news › html-div-what-is-a-di...HTML Div – What is a Div Tag and How to Style it with CSS .


1 Answers

Do you mean something like this demo fiddle?

HTML:

<div id="viewport">     <a href="#">         <img src="images/arrow_black.png" alt="" />         <span>Lorem ipsum dolor...</span>     </a> </div> 

CSS:

#viewport {     background: #bbb;     width: 350px;     padding: 5px;     position: relative; } #viewport img {     position: absolute;     top: 50%;     margin-top: -30px;  /* = image height div 2 */ } #viewport span {     margin-left: 68px;  /* = image width + 8 */     display: block;     } 
like image 151
NGLN Avatar answered Sep 23 '22 23:09

NGLN