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

Tags: html,css

Problem :

This question already has an answer here:

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


<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 class="yellowfootercontentright">
            <p> Web Design & SEO by Raven </p>


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

.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

Solution :

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;



    CSS Howto..

    How to apply css and elemental styles to a MVC 3 Web Application

    How can I make an image continue across multiple sections with breaks in between?

    How to draw a line on the baseline of the text in HTML/SVG/CSS

    How to have multiple CSS transitions on an element?

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    How do you replicate this box-shadow effect?

    CSS isn't shown when HTML file is opened in Word

    How to select child element inside first, second or third html element with CSS classes?

    How to show reply and retweet icons using hover effect with css?

    How to resolve background-image url inside css file while using azure blob storage

    Navigation bar - How to keep the page highlighted when selected?

    How to make a content div stretch from a header div to a footer div?

    How to change only one function of CSS transform property w/ multiple functions?

    How to make a HTML element fill a dynamically sized container using CSS

    How to put text over img on hover - width and height are variable

    CSS/HTML problem in IE - how to fix?

    How to remove default border of button in jquery mobile?

    Angular.js: How to change div width based on user input

    HTML / CSS: How to get fixed margin between body and footer

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    How to remove css property from last child element?

    How to rotate multiple words with CSS?

    How to invert the pentagon created using CSS?

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    How to select not first tr and not last td

    How to create two Tables in JavaScript and use with different CSS?

    CSS: How to move hint box (a:hover) to the left?

    How to select the second paragraph after another with css?

    How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row?

    How to link to a “tab” on my website