CODEWITHSUNDEEP
htmlcss
user1469270
user1469270

Reputation:

Align text center to the center of an image

I have some simple social media images, and I need the text to be in line with the center of each image. At the moment, the text is aligned to the bottom of each image, by default:

http://jsfiddle.net/uT4Ey/

CSS:

.img {
  background-color: red;
  height: 3em;
  width: 3em;
  display: inline-block;
}

HTML:

<div class="sm">
  <div class="img"></div>
  facebook
</div>
<div class="sm">
  <div class="img"></div>
  instagram
</div>
<div class="sm">
  <div class="img"></div>
  facebook
</div>
<div class="sm">
  <div class="img"></div>
  isntagram
</div>

Upvotes: 2

Views: 83

Answers (1)

Albzi
Albzi

Reputation: 15609

Add vertical-align:middle; to img or div.

.img {
  background-color: red;
  height: 3em;
  width: 3em;
  display: inline-block;
  vertical-align: middle; /*CAN GO HERE*/
}

div {
  vertical-align: middle; /*OR HERE*/
}

JSFiddle

You should add a margin to the elements after to ensure that they're not all stuck together.

Upvotes: 4

Related Questions