How Can I Center the wp-calendar?

The calendar has it’s own class wp-calendar I believe. You can set the margin:auto; But that’s just were the fun starts. See, the Calendar is placed within a

• element, so your calendar will be centered within that element and most themes indent
• ‘s.

Here’s the CSS for the Calendar on my latest theme: Black and Tan (www.3dohio.com [sorry for the shameless plug])

Some of the following code is redundant.
/* Calendar */
#wp-calendar {
color:black;
width:200px;
text-align:center;
padding:0px;
margin:auto;
border-collapse: collapse;
line-height:normal;
font:normal 12px/18px verdana, helvetica, sans-serif;
}
#wp-calendar caption {
text-align:center;
font-weight: bold;
padding:0px;
margin:auto;
line-height:40px;
background:url(“img/bt-calendar.gif”) no-repeat;
height:30px;
color:black;
}

#wp-calendar th, td {
text-align:center;
border:solid 1px #EEE;
background:white;}
#wp-calendar th {
background:white;
font-weight: bold;

}
#wp-calendar th[title=”Saturday”] {
background:#CDEB8B;
}
#wp-calendar th[title=”Sunday”] {
background:#CDEB8B;
}
#today {
background:#FFA;

}
#wp-calendar a, #wp-calendar a:active, #wp-calendar a:link, #wp-calendar a:visited {
line-height:normal;
padding:0px;
margin:0px;
color:black;
background:#C3D9FF;
display:inline;
}

#wp-calendar a:hover {
padding:0px;
margin:0px;
}
#wp-calendar #prev a, #wp-calendar #prev a:active, #wp-calendar #prev a:link, #wp-calendar #prev a:visited,
#wp-calendar #next a, #wp-calendar #next a:active, #wp-calendar #next a:link, #wp-calendar #next a:visited{
background:none;
font-weight:bold;
}

Umm… that’s very nice, Claus, thank you. Unfortunately, it does not answer my question: how do you center the calendar? If there’s a command for that in all of that code, I can’t see it. Would you mind singling it out for me?

#wp-calendar {margin:auto;} will center your calendar within its element. If your

• has padding, then you’re screwed. You could move it this way, but it may not look correct in other browsers – you’ll have to test.

#wp-calendar { position:relative; left:-10px; }

If you where not using widgets, you could use an inline style to remove the padding on your

• I hope this helps.

the above response is talking about padding on your list items. I forgot to put this in a code