3 replies [Last post]
mynot
mynot's picture
Offline
newbie
Last seen: 2 years 51 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: 14 hours 44 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9275
Points: 3281

Sounds like you need to use

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

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

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

mynot
mynot's picture
Offline
newbie
Last seen: 2 years 51 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: 14 hours 44 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9275
Points: 3281

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

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

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