CSS의 위치는

Question

HTML

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

사람이 <div class="navigation"> 내부 <a>수직 센터를 만드는 방법을 도와 줄 수

<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 도움이 필요합니다. <a> 수의 범위이므로 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; 
} 

편집 당신은 수직뿐만 아니라 당신이 수직으로 중앙에 다른 경계 상자를 추가해야합니다 중심을하려면 :

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