Home/ Questions/Q 991905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T06:10:59+00:00

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

  • 0

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

Can anyone help me how to make <a> vertically center inside <div class="navigation">. Number of <a>s ranges so I can’t just do padding-top on <div class="navigation">.

Please help. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In any case. If you wanted it VERTICALLY and HORIZONTALLY aligned (in all browsers including IE6, maybe no 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>​
    • 0