Tue, 2011-12-27 05:25
I have a variable number of divs that I would like to center horizontally:
....
<style type='text/css'> div.future{ margin-left: auto; margin-right: auto; border-style:solid; border-width:1px; width:190px; height:200px; display:inline-block; } </style> </head> <body> <?php $i=0; $future_text[0]="test text"; ?> <div id='future_events' style='border-style:solid;border-color:green;'> <div class='future' ><?php echo $future_text[$i];?></div> <div class='future'><?php echo $future_text[$i];?></div> <div class='future'><?php echo $future_text[$i];?></div> </div>
I can get one of them centered (without using the display: property). If I have two or more, they are stacked vertically, centered. If I add the display:inline-block; they are side-by-side, but no longer centered. I want them side-by-side and either evenly spread across the surrounding div or, preferably, grouped together in the center with a small margin between them.
Thanks
Tony
Tue, 2011-12-27 06:05
#1
Sounds like you need to use
Wed, 2011-12-28 09:07
#2
Gary, Thanks. Tried many
Gary,
Thanks. Tried many different combinations but couldn't get it to work. Finally used php to calculate an offset. It works, but it's not css.
Tony
Wed, 2011-12-28 11:21
#3
You were half way there.<div
You were half way there.
<div id='future_events'> <div> <?php echo $future_text[$i];?></div> <div> <?php echo $future_text[$i];?></div> <div> <?php echo $future_text[$i];?></div> </div> ===================== #future_events { text-align: center; } #future_events div { display: inline-block; }
cheers,
gary