/    Sign up×
Community /Pin to ProfileBookmark

centering multiple divisions in one row

Copy linkTweet thisAlerts:
Feb 15.2006

What I’m trying to do is center multiple divisions ie; Nine 10×14 px divisions contained in a 90×14 px division, all on the same row. When I give them centering properties using text-align and margin: auto, with proper parameters, they all align one on top of the other in a single column. When I float them left, they all align in one row but of course go as far left in their container as possible. Is it possible that I can’t use divisions if I want to align in this style?

note: If the numbers always added up to nine, I could float left, but the numbers could be anywhere as low as 1 depending on the content. There for floating causes inbalances in the visual appearance of the site when there is not nine items to list.

A sample of what I’ve got is at [url]http://www.aadioak.com/print.html[/url]

In IE and Firefox you’ll see the column of numbers, but you might not in Opera. Is there a way to center them all in the same row? Thanks for any help, I’ve googled this a bit but it doesn’t seem to be a common problem with a simple fix.

Steve

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebnerdFeb 15.2006 — Try using:


#navi2{

text-align:center;

}

#navi2 div{

display:inline;

}
Copy linkTweet thisAlerts:
@GoggleauthorFeb 16.2006 — I'll give it a go. By the way, I like the general appearance and simplicity of your website www.standardscompliance.com : )

edit: I gave it a go but it causes the numbers to disappear. I'm going to study 'inline' a bit and try it again, there's no sense trying to use something if you're not sure what it does, haha.
Copy linkTweet thisAlerts:
@GoggleauthorFeb 16.2006 — aahhh now that I see, I've got each number set as 'block', which causes a break before and after each element. I see what you were trying to do. Well, it doesn't work but when I set each number to inline, the graphical numbers disappear. I'm not sure at all why this is. [I]EDIT: Okay, they didn't disappear. They aligned left and my eye didn't catch them there. They still formed a tower.[/I]

edit2: -moz-inline-box seemed like a winner because it makes boxes behave like inlines. Well, it still forms a tower of numbers rather than plaving them in the same line. Also, I'm sure -moz-inline-box isn't standard at all.
×

Success!

Help @Goggle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...