3 replies [Last post]
mynot
mynot's picture
Offline
newbie
Last seen: 2 years 42 weeks ago
Timezone: GMT+9.5
Joined: 2011-12-27
Posts: 2
Points: 3

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 17 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9229
Points: 3235

Sounds like you need to use

Sounds like you need to use {display: inline-block;}. See Inline-block gallery demo.

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

mynot
mynot's picture
Offline
newbie
Last seen: 2 years 42 weeks ago
Timezone: GMT+9.5
Joined: 2011-12-27
Posts: 2
Points: 3

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 17 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9229
Points: 3235

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.