2

I have used img tag inside span tag. I have made the span tag's display as inline-block and given it a background color. How can I center the image inside the span tag ?

<span class='plus' id='plus_block_1'> <img src='images/plus.png' /> </span>

CSS:

.plus {
  display: inline-block;
  background-color: #e1e1e1;
  height: 40px;
}
Suhail Gupta
  • 22,386
  • 64
  • 200
  • 328
  • Horizontally or vertically? That's the question. – Hashem Qolami Aug 20 '14 at 20:45
  • Then you might want to consider this approach: http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474 – Hashem Qolami Aug 20 '14 at 20:49
  • Will you have more content inside this span, that you really need the image to align? Or are you just trying to border up the image with the span?? Because it seems like a simple `padding` solution... – LcSalazar Aug 20 '14 at 21:34

1 Answers1

4

You can achieve this by giving the .plus a line-height that matches the height of the element. Then set the img to vertical-align: middle.

See example (twice the height to make it clear): http://jsfiddle.net/1om0emoe/

Christina
  • 34,296
  • 17
  • 83
  • 119
AdmireNL
  • 396
  • 1
  • 9
  • Also checkout this complete guide for Centering in CSS by Chris Coyier: http://css-tricks.com/centering-css-complete-guide/ – AdmireNL Sep 03 '14 at 08:50