Как разместить текст в div?

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

Вертикальная прокладка и запас 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

Answer 2

Это должно работать для вас

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

футере обертка имеет высоту 40px. Таким образом, используя высоту строки 40px на внутренних элементах, это приведет к тому, что текст будет находиться в середине 40px.

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