Zhengchun's CSS Notes (5)

One day everyone in the team to discuss the "unknown picture vertically centered" problem, the whim of vertical-align:middle this attribute to achieve, so took the time to do the following immature example:
Css:

div{
  width:140px;
  height:140px;
  text-indent:-8px;
  Text-align:center;
  line-height:138px;
  background:red;
  font-size:12px;
  *font-size:120px;
  *text-indent:-60px;
}
img{
  width:100px;
  height:100px;
  Vertical-align:middle;
}

Html:

< div>& nbsp;

The original intention is not to use position to do, after all, a large number of pictures display browser in the rendering time will consume more resources.
The disadvantage is the output of meaningless nbsp, and the Font-size and FONT-INDENTD formulas are not very simple (so the above numbers are pooled ^_^).

Later pony saw this idea, with a little time to upgrade the code, with: After output instead of boring nbsp, code see below:
Css:

. tb-p-c{
  Display:block;
  width:140px;
  height:140px;
  line-height:140px;
  Text-align:center;
  *font-size:123px
}
. Tb-p-c img{
  vertical-align:middle;
Tb-p-c:after {
  content: ".";
  Visibility:hidden;
  font-size:12px;
  Margin-left: -5px;
}

Html:

In this way, the annoying nbsp disappears. We have a further understanding of the way vertical-align:middle is rendered. Also let a lot of comrades found after this pseudo class can also be used to hack.

The result center also gives CSS a secondary:
Css:

. tb-p-c{
  Display:table-cell;
  Vertical-align:middle;
  width:140px;
  height:140px;
  Text-align:center;
  *display:block;
  *font-size:122px;
  Background:red
}
. tb-p-c img {
  vertical-align:middle;
}

This is the third upgrade, due to the time relationship, did not test the above code, the reason is to use display to render, the feeling will still allow the browser to render many times, so I did not test-_-.
This discussion has given us a lot of harvest, I believe that if there is any participation, there will be more ways and we do not find the point of view. Everybody don't be stingy, more to post a reply, together raise.