Question

我已为导航栏制作了此代码。

HTML：

<div class="header-nav">
    <div class="header">
        <img src="../Pictures/LifeFrame/2.jpg" width="100%" height="100px" />
    </div>
    <div class="nav" align="center">
        <a href="#">Home</a>
        <a href="#">Gallery</a>
    </div>
</div>

CSS：

.header-nav {
    position:fixed;
    top:0;
    width:100%;
    left:0;
    right:0;
}
.nav {
    height: 42px;
    background-color:#FF0000;
}
a {
    display:inline-block;
    width:50%;
    height:42px;
    float:left;
}

但是标签a中的文字位于顶部而不是中间。如何使用显示内联块到中间的标签中创建文本？

Answer 1

由于您使用float规则vertical-align可能在这种情况下不起作用，因此您可以为此提供边距，如下所示：

a{
    display:inline-block;
    width:50%;
    height:42px;
    float:left;
    margin: 10px 0; /* add this */
}

OR

如果您想使用vertical-align，则需要相应地调整宽度

a{
    display:inline-block;
    width:20%; /* reduce width */
    height:42px;
    /*float:left; */ /* remove this */
    margin: 10px 0; /* add this */
    vertical-align:middle;/* add this */
}

Demo

Updated Demo

Answer 2

尝试vertical-align: middle;

更多信息。在vertical-align：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 3

你的意思是在你创建的区块中居中“Home”吗？

尝试使用填充的css。

a{
   display:inline-block;
   width:50%;
   height:42px;
   float:left;
   padding-top: 2px;

}

玩那个

Answer 4

删除float并使用vertical-align：

a{
    display:inline-block;
    width:50%;
    height:42px;
    vertical-align: middle;
}

Answer 5

这样做： 1）保持HTML原样。

2）按如下方式更改CSS：

.header-nav {
    position:fixed;
    top:0;
    width:100%;
    left:0;
    right:0;
}
.nav {
    height: 42px;
    background-color:#FF0000;
    vertical-align:50%;
    display:flex;
    align-items:center
}
a {
    width:50%;
    float:left;
}

See fiddle here

Answer 6

您可以尝试为padding代码

提供<a>

<强> CSS：

a{
    padding:10px 0;
    display:inline-block;
    width:50%;
    height:42px;
    float:left;
}

见小提琴：

http://jsfiddle.net/xpfsyds2/

Answer 7

将以下内容添加到“a”样式中：

    line-height: 42px;

内联块和中间文本？

7 个答案:

Demo

Updated Demo