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

css职位需要帮助

css html

Reigel Gallarde · 技术社区 · 15 年前

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 回复 | 直到 15 年前

Strelok 15 年前

无论如何。如果你想要的话 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>â

Robert 15 年前

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

Bang Dao 15 年前

试试这个

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

推荐文章