EiserneGarde
New Member
I'm trying to center align a a ul element in relation the the header above it. The ul element comprises a list of contact info (email, Twitter, rss etc). This is what I have so far:
This is achieved with the following codehtml\[code\]<html><head> <meta charset="utf-8" /> <title>Jing Xue - Portfolio</title> <link rel="stylesheet" href="http://stackoverflow.com/questions/15746048/css/normalize.css" /> <link rel="stylesheet" href="http://stackoverflow.com/questions/15746048/css/style.css" /> <link href='http://fonts.googleapis.com/css?family=Delius+Swash+Caps' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:700' rel='stylesheet' type='text/css'></head><body><div class="header"> <div class="wrapper"> <h1>Portfolio of...</h1> <h2>Jing Xue</h2> <ul class="intouch"> <li class="twitter"><a href="">Twitter</a></li> <li class="rss"><a href="">RSS</a></li> <li class="email"><a href="">Email</a></li> </ul> </div></div></body>\[/code\]css\[code\]body { background-color: rgb(255,255,255); color: rgb(59,67,68); margin: 0; padding: 0; font: 1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;}h1, h2, h3 { text-shadow: 1px 1px 2px rgba(0,0,0,0.3);}.wrapper { width: 940px; margin: 0 auto 0 auto;}/* header ------------------------------------------------------------------ */.header { text-align: center; padding: 40px 0 0 0; margin-bottom: 40px;}.header h1, .header h2 { margin: 0;}.header h1 { font-family: 'Delius Swash Caps', cursive; font-size: 250%; color: rgb(200,50,50);}.header h2 { font-family: 'Playfair Display SC', serif; font-size: 450%; color: rgb(59,67,68);}.intouch { list-style: none; margin: 0 auto; padding: 0; width: 0;}.intouch li a:link, .intouch li a:visited { padding: 0.5em 0 0.5em 40px; display: block; font-weight: bold; background-repeat: no-repeat; background-image: url(../img/sprite-roll.png); text-decoration: none; color: rgb(136,136,136);}.intouch li.twitter a:link, .intouch li.twitter a:visited { background-position: 0 6px;}.intouch li.twitter a:hover { background-position: 0 -90px; color: rgb(105,210,231);}.intouch li.rss a:link, .intouch li.rss a:visited { background-position: 0 -30px;}.intouch li.email a:link, .intouch li.email a:visited { background-position: 0 -60px;}.intouch li.twitter a:hover { background-position: 0 -90px; color: rgb(105,210,231);}.intouch li.rss a:hover { background-position: 0 -126px; color: rgb(243,134,48);}.intouch li.email a:hover { background-position: 0 -156px; color: rgb(56,55,54);}\[/code\]As you can see the .intouch ul class is not centerily aligned in relation the the header above it. I can achieve center alignment by adding \[code\]margin-left: 425px;\[/code\] to the .intouch class. Which produces this:
What I want to know is, is there a better way to achieve this center alignment instead of just adding a left margin (which I would have to change depending on the length of the text in the li's?)