Centering the Footer

HTML & CSS
1

I am struggling with how to center the following footer with CSS:

<footer>

<span id=“copyright”>©2008 CSS.com</span>

<ul class=“horizontal-list”>
<li><a href=“#”>home</a></li>
<li><a href=“#”>about</a></li>
<li><a href=“#”>contact</a></li>
</ul>

</footer>

I want it to show on the footer area centered ( all one line) @2008 CSS.com ABOUT | CONTACT | HOME

I can get the list items to work properly but cannot get them to sit in a centered position with the @2008 CSS.com.

Any thoughts on how I might get to this point.

Thanks - Gayle

2

Do you mean something like this?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

footer {text-align: center;}
#copyright, ul {display: inline-block;}
ul {list-style: none; margin: 0; padding: 0;}
li {display: inline-block; padding-left: 10px; margin-left: 8px; border-left: 1px solid #000;}
li:first-child {border: none; padding-left: 0;}
a {text-transform: uppercase; color: #FD6258; text-decoration: none;}


</style>
</head>
<body>

<footer>

<div id="copyright">&copy;2008 CSS.com</div> 

<ul class="horizontal-list">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul> 

</footer>

</body>
</html>
3

I am actually trying to get all of it to center on one line, not two so the outcome in the footer would be: @2008 CSS.com ABOUT | CONTACT | HOME .

4

Yes, that’s what my code above does. Did you try it?

5

Yes and it does work - there were some other things in my code that were causing problems when I put it in - but after fixing them it works great… thanks so much Ralph!!

6

Cool, glad it helped. :slight_smile: