позиция 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):

See it in action.

.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; 
}