代码之家  ›  专栏  ›  技术社区  ›  Reigel Gallarde

css职位需要帮助

  •  1
  • Reigel Gallarde  · 技术社区  · 14 年前

    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> 所以我不能就这么做 padding-top < .

    请帮忙。谢谢。

    3 回复  |  直到 14 年前
        1
  •  2
  •   Strelok    14 年前

    无论如何。如果你想要的话 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>​
    
        2
  •  2
  •   Robert    14 年前

    .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>
    
        3
  •  1
  •   Bang Dao    14 年前

    试试这个

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