css - Is there a way to ensure all text-align: center text is indeed centered? -
i attempting assemble footer bootstrap. reason footer links appear off-center, despite making sure text-align: center;
applied. there way ensure text elements indeed aligned properly?
html
<!doctype html> <html> <body> <div class="container-fluid"> <section class="row-fluid"> <div class="span12"> <h1 class="landing"> lorem ipsum </h1> <h4 class="landing"> lorem ipsum lorem ipsum lorem ipsum </h4> </div> </section> </div> <footer class="footer"> <section class="row-fluid"> <ul class="footer-links"> <li> <a href="#">contact</a> </li> <li> <a href="#">about</a> </li> </ul> </section> </footer> </body> </html>
css
h1.landing { text-align: center; font-size: 400%; } h4.landing { text-align: center; } .footer-links { list-style-type: none; text-align: center; } .footer-links li { display: inline; padding-right: 10px; }
it appears ul
has left padding. try removing it.
.footer-links { list-style-type: none; text-align: center; padding:0px; }
Comments
Post a Comment