позиция css нужна помощь

Question

html

<div class="navigation">
   <a class="active" href="index.html">1</a>
   <a href="index.html">2</a>
   <a href="index.html">3</a>
   <a href="index.html">4</a>
</div>

CSS

.navigation {
  float: left;
  height: 160px;
  position: relative;
  width: 24px;
}    
.navigation a {
  display: block;
}

Может кто-нибудь помочь мне, как сделать <a> по вертикали по центру внутри <div class="navigation">.Количество диапазонов <a> s, поэтому я не могу просто сделать padding-top на <div class="navigation">.

Пожалуйста, помогите.Спасибо.

Answer 1

В любом случае.Если вы хотите, чтобы он выровнялся VERTICALLY и HORIZONTALLY (во всех браузерах, включая IE6, возможно, нет IE5.5 MAC):

Смотрите это в действии.

.navigation {
  float: left;
  height: 160px;
  position: relative;
  width: 24px;
  text-align: center;
  display: table;
  _position: relative; 
  overflow: hidden;
}
.navigation_inner {
  _position: absolute; 
  _top: 50%; 
  display: table-cell; 
  vertical-align: middle;
}    
.navigation a {
  display: block;
}

HTML

<div class="navigation"> 
<div class="navigation_inner"> 
   <a class="active" href="index.html">1</a>
   <a href="index.html">2</a>
   <a href="index.html">3</a>
   <a href="index.html">4</a> 
</div> 
</div>​

Answer 2

выравнивание текста: по центру

.navigation {
  float: left;
  height: 160px;
  position: relative;
  width: 24px;
  text-align: center;
}    
.navigation a {
  display: block;
}

EDIT Если вы хотите, чтобы он также был центрирован по вертикали, вам нужно добавить еще одну ограничивающую рамку, которая будет центрирована по вертикали:

<style type='text/css'>
.navigation {
  float: left;
  height: 160px;
  position: relative;
  width: 24px;
  border: 3px solid black;
  text-align: center;
  display: table;
}    
.wrapper {
    vertical-align: middle;
    display: table-cell;
}
.navigation a {
  display: block;
}
</style>
<div class="navigation">
<div class='wrapper'>
   <a class="active" href="index.html">1</a>
   <a href="index.html">2</a>
   <a href="index.html">3</a>
   <a href="index.html">4</a>
</div>
</div>

Answer 3

Попробуйте это

.navigation {
  float: left;
  height: 160px;
  position: relative;
  width: 24px;
  vertical-align: middle;
}    
.navigation a {
  display: block;
}