How do I get text to go in the middle of a div?

Question

Why won't the text in the footer go at middle height in the div? Not really had anyone explain how to properly make a text sit in the middle (height-wise) of a div, hopefully this will also fix the white spacing at the bottom of the page as I believe that is caused by the text being pushed down

HTML

<div class="yellowfooterbackground">
    <div class="yellowfootercontent">
        <div class="yellowfootercontentleft">
            <p>IPS Fire & Security is a trading name of IPS Facilities - <u><a href="Terms-And-Conditions.html">Terms & Conditions</a></u></p>
        </div>
        <div class="yellowfootercontentright">
            <p> Web Design & SEO by Raven </p>
        </div>
    </div>
</div>

CSS

.yellowfootercontent {
    height: 30px;
    width: 950px;
    margin-right: auto;
    margin-left: auto;  
    font-family: 'Open Sans', Arial, sans-serif;
    font-size:12px;
}

.yellowfootercontentleft {
    height: 30px;
    width: 475px;
    float: left;
    text-align: left;
}

.yellowfootercontentright {
    height: 30px;
    width: 475px;
    text-align: right;
    float: right;
}

Here is a fiddle of the code above: Fiddle

Check this link: http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block — Jaime García Pérez, May 06 '14 at 11:15

Alex Char · Accepted Answer · 2016-09-15T08:20:29.770

2

You can use line-height:

.yellowfootercontent {
  height: 30px;
  width: 950px;
  margin-right: auto;
  margin-left: auto;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 12px;
  line-height: 5px;
}

References

line-height

edited Sep 15 '16 at 08:20

answered May 06 '14 at 11:15

Alex Char

32,879
9
49
70

score 0 · Answer 2 · answered May 06 '14 at 11:19

0

Try this

.yellowfootercontentright {
 height: auto;
 width: 475px;
 margin-right: 20%;
 margin-left: 20%;
 line-height: 4px;
 }

The line height will resolve the height issue.

answered May 06 '14 at 11:19

Harry

3,031
7
42
67

score 0 · Answer 3 · answered May 06 '14 at 11:34

.yellowfottercontent, text-align you have applied as "left", it should be center to get the text to center.

.yellowfootercontentleft {
height: 30px;
width: 475px;
float: left;
text-align: center;
 }

one more thing, it too depends on height you will give to the div ,for example check this fiddle

text at center

here height is 50px, and margin is 10px that means, margin surrounds with 10px of space which helps in text to be center of the div

let me know

How do I get text to go in the middle of a div?

3 Answers3