How to position text in a div?

Question

I am a little confused about how to position text in a div. I want the text to be in the centre of the div height-wise, so I've tried changing the top padding and margin and also the position but nothing is working. This usually worked for me before so I don't know why it is not working now. Here is the code I have

<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>

and the 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;
}

score 0 · Answer 1 · answered Aug 30 '14 at 07:17

0

This should work for you

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

Your footer wrapper has a height of 40px. So by using the line-height 40px on the inner elements it will cause the text to be in the middle of the 40px.

answered Aug 30 '14 at 07:17

CRABOLO

8,605
39
41
68

ok thanks :) also it worked the same with and without the padding changed – thyme Aug 30 '14 at 07:25

score 0 · Answer 2 · answered Aug 30 '14 at 08:14

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

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Vertical padding and margin doesn't work with inline display, For your purpose in my opinion inline-block display could be okay:

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

JSFiddle

edited May 23 '17 at 11:49

Community

1
1

answered Aug 30 '14 at 09:27

frogatto

28,539
11
83
129

How to position text in a div?

3 Answers3