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

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



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

References

line-height


    CSS Howto..

    how to do jquery once fade out has finished?

    How to draw arrows in CSS [closed]

    How can set text row limit using angularJs ng-repeat?

    How to implement dynamic layout columns by using the `content_for?` method?

    CSS - How to select nth-child of form element?

    How to fix clipped text over 3D transform image on Safari?

    How to remove unused CSS but keep comments?

    How to send CSS to the client using HTTP response headers?

    How to set numerous links in a single line with CSS?

    How to add stylesheet to toolbar

    How to make pagination's circle of slider using CSS only?

    Slideshow using background images with navigation and captions

    How to stop an image shrinking on responsive site whilst also keeping it centred

    DevTools: How to visualize scss changes automatically without the need to save

    How to make read more option with html/CSS?

    How to use Resource bundle(Client Bundle) in JSNI?

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    how to use dialogClass option in jquery dialog with an external CSS file

    How to get two column float left div layout to word wrap?

    How to match element containing another element?

    How to use grunt sass to compile and compress scss to css?

    How can I create DIV “rows” while having a DIV float beside them?

    CSS Animation: how to trigger the reverse animation?

    Show/Hide & Change CSS functions are not working

    How to make scrollable table's header fixed using css fixed position property?

    How to make a div one on the top and one on the bottom touching

    How to make one div's height depended of another div's height?

    How can I get the font size of an element as it was set by css

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    How can I style flexbox children in a multiline