center text inside of a div of an img

Question

I'm trying to center (horizontally and vertically) a text inside a picture but I'm not sure how to do it.

vertical-align and text-align doesn't seem to work and specifying the width and height doesn't seem to lead to any solution either.

HTML:

<a href="#" class="fadeBlack">
<span class="blackBG">
    <p class="picDisc">TEST</p>
    <img src="http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" width=100% height=100%>
</span>

CSS:

.photoGallery img {
background: #181818 no-repeat;
border-radius: 10px;
}
.blackBG {
display: inline-block;
background: #000000;
border-radius: 10px;
}
.picDisc {
position: absolute;
vertical-align: middle;
text-align: center;
}
a.fadeBlack img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.fadeBlack:hover img {
opacity: 0.6;
background-color: #000;
}

Here's my JSFiddle.

Add `width:100%;` to your `picDesc` Class for Center horziontally — j_s_stack, Jan 20 '15 at 00:53

score 1 · Answer 1 · answered Jan 20 '15 at 00:52

Use left: 50%, top: 50% and transform: translate(-50%, -50%) to center the .picDisc vertically and horizontally.

Updated Fiddle

.photoGallery img {
  background: #181818 no-repeat;
  border-radius: 10px;
}
.blackBG {
  position: relative;
  display: inline-block;
  border-radius: 10px;
}
.picDisc {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}
a.fadeBlack img {
  display: block;
  -webkit-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
a.fadeBlack:hover img {
  opacity: 0.6;
  background-color: #000;
}

<a href="#" class="fadeBlack">
  <span class="blackBG">
        <p class="picDisc">TEST</p>
        <img src="http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" width="100%" height="100%" />
    </span>
</a>

center text inside of a div of an img

1 Answers1