Horizontal Center Alignment

vicco · 2006-03-10 00:34:39

I want to center my blog and I have no idea how to do this to my container div. Searched here and on w3c…

thebombsite · 2006-03-10 00:51:21

Use

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

in the CSS for your main container.

goncalo.dumas · 2006-03-10 00:51:42

You have to define the container’s div width and them set it’s left and right margin values as “auto”.

<code>#container {width:400px; margin:0 auto;}</code>… this will get your div with a 400px width, top and bottom margin 0 and left and right margin auto.

Is this what you wanted?

Last edited by patchwork (2006-03-10 00:52:29)

vicco · 2006-03-10 01:35:43

exactly what I wanted, thanks sir

stdmedia · 2006-03-12 06:15:05

Isn’t there a need to pust something like a body {text-align: center;} to make this work in IE? I always thought there was need to, maybe I was mistaken

marios · 2006-03-12 14:17:18

That’s meant basically for older IE versions that do not understand the auto margins, so AFAIK what you do is set text-align center on your body element(That will center your container in older versions of IE)
Use <code>{margin 0 auto;}</code> on your containing element and then you reset the text-align center to text-align:“any” on any child block level elements, that you’re interested in.

regards, marios

thebombsite · 2006-03-12 14:47:01

I think using the shorthand with “auto” can throw problems with other browsers (I think on Macs) so I would suggest using separate margin-left and margin-right attributes with “auto” as I show above.

As for zero margins and padding, if you always start your CSS with:-

* { margin: 0; padding: 0; border: 0; } <br />

there should be no need for them in the rest of your CSS so this will probably save you a lot of code lines as well as setting all browsers at the same point to start with.

Last edited by thebombsite (2006-03-12 14:52:55)

squaredeye · 2006-03-13 00:04:58

Throw a little outline magic in there too, so that Firefox doesn’t add that little dotted box around an element at onclick.
<code> * {
outline: 0;
margin: 0;
padding: 0;
border: 0;
}
</code>

for what its worth.

M

thebombsite · 2006-03-13 01:07:03

Ooo. That’s a new one for me. I must be getting old. I shall be adding that thank you. :)

NyteOwl · 2006-03-13 19:33:18

Hmm outline: 0; was new to me too. It didn’t seem to work here. DOes it require a particular doctype or browser (Still using FF 1.0.7)?

squaredeye · 2006-03-13 20:20:53

Take a look at this tutorial

Hope it helps,

Matthew

thebombsite · 2006-03-13 22:46:50

Well I added it last night after Matthew’s post and all seems to work fine for me though in FF 1.5.0.1

NyteOwl · 2006-03-14 02:16:22

Thanks ma_smith for the pointer to the tutorial but even after reading that article and explictly applying outline: none; to the anchors in the CSS file it still didn’t. The Moz specific solution did work but that breaks the CSS validition.

squaredeye · 2006-03-14 02:29:35

Hmm. Don’t know what else to tell ya? YOu don’t have outline specified somewhere else do you? Have you tried another machine’s build of the same version of FF? Perhaps its an internal setting that I don’t know about? I’m not a real whiz with any of this stuff, I’m more of a scavenger.

Hope it works out,

Matthew

NyteOwl · 2006-03-14 18:57:37

The thing is, if it relies on some more or less unknow/obscure setting in the client program then its use, while of potential benefit in some clients cannot be relied on to produce consistant results across users. I shall contiue to investigate – quirks like this tend to intrigue me.

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-10 00:34:39

Horizontal Center Alignment

#2 2006-03-10 00:51:21

Re: Horizontal Center Alignment

#3 2006-03-10 00:51:42

Re: Horizontal Center Alignment

#4 2006-03-10 01:35:43

Re: Horizontal Center Alignment

#5 2006-03-12 06:15:05

Re: Horizontal Center Alignment

#6 2006-03-12 14:17:18

Re: Horizontal Center Alignment

#7 2006-03-12 14:47:01

Re: Horizontal Center Alignment

#8 2006-03-13 00:04:58

Re: Horizontal Center Alignment

#9 2006-03-13 01:07:03

Re: Horizontal Center Alignment

#10 2006-03-13 19:33:18

Re: Horizontal Center Alignment

#11 2006-03-13 20:20:53

Re: Horizontal Center Alignment

#12 2006-03-13 22:46:50

Re: Horizontal Center Alignment

#13 2006-03-14 02:16:22

Re: Horizontal Center Alignment

#14 2006-03-14 02:29:35

Re: Horizontal Center Alignment

#15 2006-03-14 18:57:37

Re: Horizontal Center Alignment

Board footer