CODEWITHSUNDEEP
css
Kuan
Kuan

Reputation: 11389

Can not center align an image element vertically

All:

I am pretty new to CSS layout, currently I have a very simple layout:

http://placehold.it/16/16
span.icons {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: lightblue;
  text-align: center;
}
<html>
<head>
</head>
<body>
<span class="icons">
	<img src="http://placehold.it/16/16" />
</span>
</body>
</html>

It is so wierd, cos the same HTML works very well when I paste it in this question and run it here, but it just does not work in my local even I use same browser, here is what it looks like in my local:

enter image description here enter image description here

What I want to do is to center-align(only vertically will be fine) the image(16 by 16 pixels), but the image is always at the top-center.

Could anyone help to center align it and a little explain with WHY it does not work now?

Thansk

Upvotes: 0

Views: 115

Answers (3)

Paulie_D
Paulie_D

Reputation: 115046

The specified code works as required BUT I noticed that no DOCTYPE had been declared. This could cause the browser to enter Quirks Mode....which will cause inconsistent page rendering.

Related Do modern browsers care about the DOCTYPE?

span.icons {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: lightblue;
  text-align: center;
}
<span class="icons">
    <img src="http://lorempixel.com/image_output/nature-q-g-16-16-7.jpg"/>
</span>

Of course, these days, I'd use flexbox:

span.icons {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-color: lightblue;
  justify-content: center;
  align-items: center;
}
<span class="icons">
    <img src="http://lorempixel.com/image_output/abstract-q-c-16-16-1.jpg">
</span>

Upvotes: 5

blurfus
blurfus

Reputation: 14031

You mean something along the sides of this?

span.icons {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: lightblue;
  text-align: center;
}
<span class="icons">
    <img src="http://placehold.it/16/16">
</span>

As to why your code did not work:

defining DOCTYPE is the difference

Upvotes: 1

Dani
Dani

Reputation: 94

Just try adding 

vertical-align: middle;

https://jsfiddle.net/5ky6jLuj/1/

Upvotes: -2

Related Questions