Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2006-03-10 00:34:39
- vicco
- Member
- Registered: 2005-12-07
- Posts: 21
Horizontal Center Alignment
I want to center my blog and I have no idea how to do this to my container div. Searched here and on w3c…
Offline
Re: Horizontal Center Alignment
Use
margin-left: auto;
margin-right: auto;
in the CSS for your main container.
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: Horizontal Center Alignment
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)
Offline
#4 2006-03-10 01:35:43
- vicco
- Member
- Registered: 2005-12-07
- Posts: 21
Re: Horizontal Center Alignment
exactly what I wanted, thanks sir
Offline
#5 2006-03-12 06:15:05
- stdmedia
- Member
- From: Canada
- Registered: 2006-01-05
- Posts: 51
Re: Horizontal Center Alignment
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
Offline
#6 2006-03-12 14:17:18
- marios
- Archived Plugin Author
- Registered: 2005-03-12
- Posts: 1,253
Re: Horizontal Center Alignment
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
⌃ ⇧ < ⎋ ⌃ ⇧ >
Offline
Re: Horizontal Center Alignment
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)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
Re: Horizontal Center Alignment
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
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: Horizontal Center Alignment
Ooo. That’s a new one for me. I must be getting old. I shall be adding that thank you. :)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#10 2006-03-13 19:33:18
- NyteOwl
- Member
- From: Nova Scotia, Canada
- Registered: 2005-09-24
- Posts: 539
Re: Horizontal Center Alignment
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)?
Obsolescence is just a lack of imagination. / 36-bits Forever! / #include <disclaimer.h>;
Offline
Re: Horizontal Center Alignment
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: Horizontal Center Alignment
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
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline