Horizontal centering issue with varying # of spans

[waycool141]

OK, I guess this should be simple but I haven't been able to figure it out or find an answer. I am displaying a bar of "action buttons" that are spans. I need these action buttons to center, there can be anywhere from 2 to 7 of them. I can get some centering using fixed width but since the number of buttons varies this doesnt really work. I have no problem adding or changing container types. See the HTML and CSS below...

Please help and thanks!!

The HTML:

<div class="widgetWrapper">
<div class="widgetWrapperTopHalf">
<div class="widgetName">Widget Name</div>
<div class="widgetDescription">This is some kind of widget</div>
<div class="widgetThumb">
<img class="widgetThumbImage" src="http://www.reel.com/Content/reelimages/reviews/200x130_simpsons_6.jpg" />
</div>
</div>
<div class="widgetWrapperBottomHalf">
<div class="widgetActionBar">
<span class="widgetActionButton" style="color:red;" title="action1">A</span>
<span class="widgetActionButton" style="color:blue;" title="action2">B</span>
<span class="widgetActionButton" style="color:white;" title="action3">C</span>
<span class="widgetActionButton" style="color:black;" title="action4">D</span>
</div>
</div>
</div>

The CSS:

<style type="text/css">
.widgetWrapper
{
display:block; 
float:left;
margin-left:7px;
margin-top:7px;
padding-top:10px;
padding-right:5px;
padding-left:5px;
border-right:solid 1px #CFCFCF;
border-left:solid 1px #ECECEC;
border-bottom:solid 2px #CFCFCF;
border-top:solid 1px #ECECEC;
height:350px;
width:250px;
text-align:center;
}

.widgetWrapperTopHalf
{
display:block; 
height:80%;
width:100%;
}

.widgetWrapperBottomHalf
{
display:block; 
height:20%;
padding:0;
width:100%; 
float:right;
text-align:center;
}

.widgetName
{
position:relative;
font-size:11px;
font-weight: Bold;
color: #000000; 
text-align:center;
display:block;
clear:both;
white-spacere-wrap;
margin-top:-10px;
}

.widgetThumb
{
width:100%;
display:block;
margin-top:5px;
padding:0px;
}
.widgetThumb img
{
cursorointer;
}

.widgetActionBar
{
clear:both;
display:block;
height:24px;
width:100%;
text-align:center;
}

.widgetActionButton
{
/* position:relative;*/
float:left;
display:table;
clear:none;
height:20px;
width:17px; 
margin-left:5px;
margin-right:5px;
padding-left:2px;
cursorointer;
background-color:#C0C0C0;
border-top:solid 1px #bababa;
border-left:solid 1px #bababa;
border-right:solid 2px #455769;
border-bottom:solid 2px #455769;
} 

</style>

[cmills83]

make the margin for widgetWrapper like this

margin:0 auto;

or

margin-left:auto;
margin-right:auto;

[waycool141]

make the margin for widgetWrapper like this

margin:0 auto;

or

margin-left:auto;
margin-right:auto;

I tried this but it did not work. :confused:
Thanks for replying though!

I actually received the answer on another forum I posted on. For anyone curious here was the solution, the .widgetActionButton CSS class was changed.

.widgetActionButton
{
	height:20px;
	width:17px;
	display: table-cell;
	display: inline-table; 
	display: inline-block;
	margin-left:5px;
	margin-right:5px;
	padding-left:2px;
	cursor:pointer;
	background-color:#C0C0C0;
	border-top:solid 1px #bababa;
	border-left:solid 1px #bababa;
	border-right:solid 2px #455769;
	border-bottom:solid 2px #455769;
}

[cmills83]

is that working on ie6?

[waycool141]

Yes, I tested in IE 6.0 and Safari and its working great. I haven't tested in IE 7 as of yet...

[cmills83]

you should be fine then, sometimes theres ie6 issues with the display:table