Question

我正在尝试使用div而不是通常的列表创建网站导航栏。 div是内联块，在悬停时，导航栏会扩展。这应该会导致所有内部div扩展(height:100%)，同时保留居中文本。我只想使用html和css。

一种方法是设置line-height并使用vertical-align:middle。但是由于div以动态方式垂直扩展，我无法给line-height提供静态值。我尝试使用line-height:100%，但这似乎没有帮助！

html：

<html>
  <head>
    <title>Hello</title>

    <link rel="stylesheet" type="text/css" href="style2.css">
  </head>

  <body>
      <div id="headContainer">
      <a href="/HOME"><div id="logo"></div></a>
        <div id="rightBar">
            <div class="navelement"><a href="HOME">HOME</a></div>
            <div class="navelement"><a href="HOME">HOME</a></div>
            <div class="navelement"><a href="HOME">HOME</a></div>
            <div class="navelement"><a href="HOME">HOME</a></div>
        </div>
      </div>

  </body>

Css：

* {
    margin: 0;
    padding: 0;
}
#headContainer {
    height: 80px;
    width: 100%;
    background-color: white;
    border: 5px solid red;
}
#headContainer:hover {
    height: 100px; /*Dynamically change navbar height on hover, thus changing the height of all children*/
}

#rightBar {
    line-height:100%;
    display: inline-block;
    width:80%;
    height: 100%;
    border: 5px solid blue;
    vertical-align: middle;
}

.navelement{
    display: inline-block;
    height: 100%;
    border:2px solid cyan;
}

JSFIDDLE： http://jsfiddle.net/GBz3s/1/

Answer 1

如果你使用导航的精确高度，那么你可以通过声明高度，浮动div，做一些数学运算并相应地进行调整来使用带填充的hack。您可以在此处看到更新的小提琴：http://jsfiddle.net/Perry_/GBz3s/3/

.navelement{
    float: left;
    width: 24.25%; 
    border:2px solid cyan;
    position: relative;
    height: 70px;
    padding: 25px 0 0 0;
}

    #rightBar:hover .navelement {
        height: 90px;
        padding: 45px 0 0 0;
    }

Answer 2

你可以像this

那样做

您需要将display: inline-table;提供给.navelement和

display: table-cell; vertical-align: middle;至.navelement a

CSS

.navelement{
    display: inline-table;
    height: 100%;
    border:2px solid cyan;
}
.navelement a {
    display: table-cell;
    vertical-align: middle;
}

如何在动态变化高度的div内垂直居中文本？

2 个答案: