center text to the middle of image

Question

I would like to vertically center text next to the image on the left but can seem to do it

.socialShare {
  position: relative;
  &__CTA {
    position: absolute;
    bottom: -30px;
    background-color: #d0d0d0;
    padding-right: 18px;
    height: 38px;
    img {
      display: inline;
      height: 38px;
      width: 38px;
    }
    p {
      display: inline;
    }
  }
}

<div class="socialShare">
  <strong>
              <img alt="" src="https://www.asthma.org.uk/globalassets/health-advice/asthma-attacks/what-to-do-if-youre-having-an-asthma-attack.jpg" height="350" width="700" />
            </strong>
  <div class="socialShare__CTA">
    <img src="dist/images/arrow.jpg" alt="">
    <p>Share image</p>
  </div>

heres a codepen for an example what I've got.

CodePen Link

Please provide all relevant code in an [mcve] in the question itself, not on a third-party site. — Heretic Monkey, Feb 28 '17 at 16:26
Possible duplicate of [Horizontally & Vertically Center Text OVER an HTML Image (Absolute Positioning)](http://stackoverflow.com/questions/34955797/horizontally-vertically-center-text-over-an-html-image-absolute-positioning) — Heretic Monkey, Feb 28 '17 at 16:27

score 1 · Answer 1 · answered Feb 28 '17 at 16:23

1

Assuming you are talking about the share button at the bottom of the page, just add vertical-align: middle; to the CSS property of the image will vertically center the text next to it.

answered Feb 28 '17 at 16:23

Vishwas Singh Chouhan

881
6
11

score 1 · Answer 2 · answered Feb 28 '17 at 16:26

1

Add a vertical-align, to the img element, to pull the proceeding text to the center of the outer div tag. Like so:

  img {

    display: inline;
    height: 38px;
    width: 38px;

    vertical-align: middle;
  }

answered Feb 28 '17 at 16:26

Harry Mumford-Turner

856
10
17

happymacarts · Answer 3 · 2017-02-28T17:00:12.673

I believe you had some nesting errors with your css as well you also had height and width attributes on the image which should be moved to your css

.socialShare {
  position: relative;
}

.socialShare strong img {
  height: "350px";
  width: "700px";
}

.socialShare__CTA {
  position: absolute;
  bottom: -30px;
  background-color: #d0d0d0;
  padding-right: 18px;
  height: 38px;
}

.socialShare__CTA img {
  display: inline;
  height: 38px;
  width: 38px;
  vertical-align: middle;
  /* <-- add this line */
}

p {
  display: inline;
}

<div class="socialShare">
  <strong>
    <img alt="" src="https://www.asthma.org.uk/globalassets/health-advice/asthma-attacks/what-to-do-if-youre-having-an-asthma-attack.jpg"  />
  </strong>

  <div class="socialShare__CTA">
    <img src="dist/images/arrow.jpg" alt="">
    <p>Share image</p>
  </div>

</div>

center text to the middle of image

3 Answers3