Question

我对如何在div中定位文字感到有些困惑。我希望文字位于div 高度的中心，因此我尝试更改顶部padding和margin以及这个位置但没有任何效果。这通常对我有用，所以我不知道为什么它现在不起作用。这是我的代码

<div class="foot">
    <div class="menu">English</div>
    <div class="menu">Maths</div>
    <div class="menu">Science</div>
    <div class="menu">SAM</div>
    <div class="menu">German</div>
</div>

和CSS

.menu {
    width: 200px;
    display: inline;
    padding: 5px 7% 0% 7%;
    font-size: 20px;
    position: relative; 
}
.foot {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0px;
    background-color: #54a992;
    border-top: solid black 1px;
    text-align: center;
    opacity: 100%;
    z-index: 2;
    left: 0px;
}

Answer 1

这应该对你有用

.menu {
    line-height: 40px; /* add this */
    padding: 0 7%; /* changed this */
}

您的页脚封面高度为40px。因此，通过在内部元素上使用行高40px，它将使文本位于40px的中间。

Answer 2

.menu{
    width: 200px;
    display: inline;
    padding: 0 7%;
    font-size: 20px;
    position: relative;

}
.foot{
    width: 100%;
    height: 40px;
    line-height:40px;
    position: fixed;
    bottom: 0px;
    background-color: #54a992;
    border-top: solid black 1px;
    text-align: center;
    opacity: 100%;
    z-index: 2;
    left: 0px;
}

Answer 3

显示inline的垂直填充和边距doesn't work，在我看来inline-block显示可能没问题：

.menu{
    margin-top: 25%;  /* Adjust it as you wish */
    width: 80px;
    display: inline-block;
    font-size: 15px;
    position: relative;
}

JSFiddle

如何在div中定位文本？

3 个答案: