如何在div中定位文本？答案

【问题标题】：How to position text in a div?如何在div中定位文本？
【发布时间】：2014-08-30 07:15:13
【问题描述】：

我对如何在div 中定位文本有点困惑。我希望文本位于div height-wise 的中心，所以我尝试更改顶部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;
}

【问题讨论】：

标签： html css text position

【解决方案1】：

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

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

JSFiddle

【讨论】：

【解决方案2】：

这应该适合你

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

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

【讨论】：

好的，谢谢 :) 无论有没有改变填充，它的工作原理都是一样的

【解决方案3】：

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

【讨论】：