-3

How to vertical align text over on the middle image, if i have html like this. I want the flow of the text to be always in the middle, even when there are one ore two lines of text.

<div class="area-position">
    <img src="image.jpg" alt="image" /> 
    <a class="image-text" href="/link">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</a>
</div>

I found multiple solutions but non had the image as part of the div.

Should i generate html somehow else?

Navitua
  • 99
  • 12
  • Did you search at all for text overlay on image? You would have gotten ***thousands*** of similar questions. – Paulie_D Apr 29 '16 at 12:59
  • I found mutiple yes, but non has the vertical middle overlay. Thank you for your answer. – Navitua Apr 29 '16 at 13:02
  • So your question needs to be reframed to be primarily about vertical centering of text. Again ***thousands*** of questions – Paulie_D Apr 29 '16 at 13:03
  • 1
    Possible duplicate of [Vertically align text next to an image?](http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) – Sebastian Brosch Apr 29 '16 at 13:27

2 Answers2

1

There are two ways I can think of.

Detach your image from the document flow with CSS.

div.area-position {
    position:relative;
}

div.image-text {
    position:absolute;
    top:0;
    left:0;
}

Or set your image as the background of your div.

div.area-position {
    background:url('image.jpg') top left no-repeat;
}

Either way you'll need to specify a width and height for your container.

PinkTurtle
  • 6,942
  • 3
  • 25
  • 44
0

you can try this code sample

#parent {display: table}

#child {
  display: table-cell;
  vertical-align: middle;
 }

This is an old and often forgotten display method but a good way to center align stuff

Hope this helps

Take care and happy coding

Dhaval Chheda
  • 4,637
  • 5
  • 24
  • 44