Откуда взялись 4px?
 

Здравствуйте! Никак не соображу почему третий div не строго по центу, а съехал на 4px. Меняла font-size и line-height и бестолку, всё равно 4px. Пример на http://jsfiddle.net/NMitra/Ks9wm/

<style>
.vyrovnyat {
  background: #fff5d7;
  text-align: center;
  line-height: 300px;
}
.vyrovnyat > div {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.vyrovnyat div div {
  line-height: 25px;
}
</style>

<div class="vyrovnyat"> <div> <div>Этот текст<br>По середине<br>По середине</div> </div> </div>

<script>
var raz = document.querySelector('.vyrovnyat div div');
var dva = document.querySelector('.vyrovnyat');
var bottom = dva.getBoundingClientRect().bottom - raz.getBoundingClientRect().bottom;
var top = raz.getBoundingClientRect().top - dva.getBoundingClientRect().top;
alert(top + "=" + bottom);
</script>

Конечно может оффтопик, но где ты научился так верстать то? и что надо сделать в данном случае?

NMitra,
Сброс стилей с помощью CSS Reset

<link rel="stylesheet" type="text/css" href="http://www.ejeliot.com/samples/reset/reset.css">

http://jsfiddle.net/Ks9wm/1/
Killer Collection of CSS Resets
http://yuilibrary.com/yui/docs/cssreset/
CSS Reset — это основа CSS

cyber_bober,
пытаюсь разобраться как связаны line-height и vertical-align и что ещё там есть, если появляются эти 4px.

Скрипт для ленивых, чтобы не высчитывать отступ сверху и снизу.

рони,
всё равно 114.5=110.5, а должно быть 112.5=112.5
(300px-25px*3)/2
высота родителя - высота дочернего элемента и всё это попалам

Всем спасибо, разобралась http://jsfiddle.net/NMitra/Ks9wm/3/