How to center text vertically and horizontally over an image

Question

All I want to do is center my text vertically and horizontally on an img..

Tried a lot of things but nothing works so far :/

    <div class="img_container">
     <img class="cover-image" src="img.jpg" alt="omg" />
     <h2> bla bla bla </h2>
   </div>

  .img_container {
    width: 100%;
  }

  .img_container h2 {
    margin: 0;
  }

Check this other [question](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) might be what you are looking for — T04435, Jun 09 '16 at 11:11

Marcos Pérez Gude · Accepted Answer · 2018-08-08T10:03:03.360

9

Just use position absolute and translate. Will be perfect centered (horizontally and vertically)

.img_container {
  position: relative;
}
.img_container img {
  width: 100%;
  height: auto;
}
.img_container h2 {
  color: white;
  text-shadow: 1px 1px 1px black;
  position: absolute;
  top: 50%;
  left:  50%;
  -webkit-transform: translate(-50%, -50%); /* iOS */
  transform: translate(-50%, -50%);
}

<div class="img_container">
  <img class="cover-image" src="http://lorempixel.com/400/200/sports/" alt="omg" />
  <h2> bla bla bla </h2>
</div>

edited Aug 08 '18 at 10:03

answered Jun 09 '16 at 09:00

Marcos Pérez Gude

21,869
4
38
69

Thanks a lot ! Didn't think about that solution...It's quite nice. – Unknown User Jun 10 '16 at 08:26
It's a good solution because you don't need to know the size of the element to center it perfectly vertically and horizontally. You are welcome :) – Marcos Pérez Gude Jun 10 '16 at 08:40

score 1 · Answer 2 · answered Jun 09 '16 at 09:04

1

Here's a good tuto to do it: css-tricks.com - Text Blocks Over Image.

Basically, you can fix your text with position: absolute then move it where you want to with top, left, etc.

answered Jun 09 '16 at 09:04

QuidamAzerty

356
4
10

3

Please see Marcos Pérez Gude's answer - In my opinion, Marcos's answer enhances this solution, is better and is more suited to what tools we have at our disposal these days rather than when that article came out 7 years ago ... – David Wilkinson Jun 09 '16 at 09:09

score 0 · Answer 3 · answered Jun 09 '16 at 09:00

1) You could simply put the image in the background of the image-container and simply give the css properties to image container as

style="vertical-align:middle and text-align center"

Or

2) You can use these classes and get your work done.

.image {
    position:relative;
}

.text {
    left: 0;
    position:absolute;
    text-align:center;
    top: 30px;
    width: 100%
}

where html code would be like

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       Text of variable length
    </div>
</div>

score 0 · Answer 4 · answered Jun 09 '16 at 09:10

Yet another manner of implementing this:

.img_container {
    width: auto;
    position: relative;
    display: inline-block;
  }

.img_container h2 {
    position: absolute;
    top: 40%; /* adjust accordingly to suit requirements */
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
}

<div class="img_container">
     <img class="cover-image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" alt="omg" />
     <h2>Postioned Absolute</h2>
   </div>

How to center text vertically and horizontally over an image

4 Answers4