Question

我试图在html + css中创建水平菜单，但我对菜单元素的垂直对齐有问题。你知道如何以我的链接为中心吗？这是代码： HTML：

<div id="navigation">

    <div class="nav"><a href="#">Link<br>1</a></div>
    <div class="nav"><a href="#">Link2</a></div>
    <div class="nav"><a href="#">Link3</a></div>
    <div class="nav"><a href="#">Link4</a></div>

</div>

CSS：

#navigation
{
    float: left;
    width: 100%;
    background: #cccccc;
    text-align:center;
    box-shadow: 0 3px 2px #555555;
    height:100px;
    vertical-align:middle;
    padding:0
}

.nav
{

    display:inline-block;
    width: 120px;
    height:100%;
    padding:0;
    text-align:center;
    font-size:20px;
    vertical-align:middle;
    margin:0;

}

.nav a
{
    color:#333333;
    text-decoration: none;
    display:inline-block;
}

看起来像这样：1

Answer 1

将line-height添加到.nav并删除vertical-align。

Like so

.nav
{

    display:inline-block;
    width: 120px;
    line-height: 100px;
    height:100%;
    padding:0;
    text-align:center;
    font-size:20px;
    vertical-align:middle;
    margin:0;

}

Answer 2

这是一种使文本标签垂直居中而不指定line-height为包含元素高度的方法。

将display: table-cell应用于链接（.nav a）并继承高度值首先进入.nav然后进入.nav a。对于表格单元格，vertical-align属性将按预期使文本居中。这种方法的优点是，如果标签跨越两条线，则文本仍然是垂直居中的。

结果是a具有更大的活动区域并且表现得更像a 按钮。某些设计可能是一个理想的特征。

当然，你的标签是单个单词（仅一行文字）然后是行高技巧可能是一个不错的选择。

＆＃13;

#navigation {
  float: left;
  width: 100%;
  background: #cccccc;
  text-align: center;
  box-shadow: 0 3px 2px #555555;
  height: 100px;
  padding: 0
}
.nav {
  display: inline-block;
  width: 120px;
  height: inherit;
  padding: 0;
  text-align: center;
  font-size: 20px;
  margin: 0;
  border: 1px dashed blue;
}
.nav a {
  color: #333333;
  text-decoration: none;
  display: table-cell;
  vertical-align: middle;
  border: 1px dotted blue;
  height: inherit;
  width: inherit;
}

＆＃13;

<div id="navigation">
  <div class="nav"><a href="#">Link1<br>sub-text</a></div>
  <div class="nav"><a href="#">Link2</a></div>
  <div class="nav"><a href="#">Link3</a></div>
  <div class="nav"><a href="#">Link4</a></div>
</div>

＆＃13;

如何在div中设置元素的中间垂直对齐？

2 个答案: