Advertisement:
« previous next »
Pages: [1]   Go Down

Author Topic: centering ellements using css?  (Read 16156 times)

Offline Tim

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,857
  • Gender: Male
  • Marketing Consultant
    • tim.ceuppens on Facebook
    • http://www.linkedin.com/in/timceuppens on LinkedIn
    • @timcbe on Twitter
    • Tim Ceuppens
centering ellements using css?
« on: August 04, 2003, 12:48:18 PM »
Does anybody know a way to center a block using just css?

so far the only thing I've found was

Code: [Select]
.block{
      width: 90%;
      margin-left: 5%;
      margin-right: 5^%;
}but that results in some browser issues...
Logged

Offline Joel

  • Semi-Newbie
  • *
  • Posts: 59
  • Gender: Male
Re:centering ellements using css?
« Reply #1 on: August 04, 2003, 01:04:37 PM »
Margin: auto will center a block element as long as the width is set.

Code: [Select]
.block { width: 90%; margin: auto; }
« Last Edit: August 04, 2003, 01:04:55 PM by Joel »
Logged

Offline Tim

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,857
  • Gender: Male
  • Marketing Consultant
    • tim.ceuppens on Facebook
    • http://www.linkedin.com/in/timceuppens on LinkedIn
    • @timcbe on Twitter
    • Tim Ceuppens
Re:centering ellements using css?
« Reply #2 on: August 04, 2003, 01:07:17 PM »
have you got a working example, because I can't get it to work :-/
Logged

Offline Joel

  • Semi-Newbie
  • *
  • Posts: 59
  • Gender: Male
Re:centering ellements using css?
« Reply #3 on: August 04, 2003, 01:41:05 PM »
Do you have a valid DOCTYPE? If not, the browser will default to tag soup mode (for old and non-standards compliant pages). It also keeps margin: auto from working.

http://www.w3schools.com/tags/tag_doctype.asp
« Last Edit: August 04, 2003, 01:42:06 PM by Joel »
Logged

Offline Tim

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,857
  • Gender: Male
  • Marketing Consultant
    • tim.ceuppens on Facebook
    • http://www.linkedin.com/in/timceuppens on LinkedIn
    • @timcbe on Twitter
    • Tim Ceuppens
Re:centering ellements using css?
« Reply #4 on: August 04, 2003, 02:23:21 PM »
yah, I know how to do valid html ;)

they should really put an align statement in css  :-\
Logged

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,142
  • Gender: Male
Re:centering ellements using css?
« Reply #5 on: August 04, 2003, 03:06:13 PM »
That's something I've always felt was missing from CSS 2.  There's no vertical align and the horizontal one is "text-align" which doesn't fit everything...

-[Unknown]
Logged

Offline Joel

  • Semi-Newbie
  • *
  • Posts: 59
  • Gender: Male
Re:centering ellements using css?
« Reply #6 on: August 04, 2003, 03:15:53 PM »
Here's an example.
Logged

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,142
  • Gender: Male
Re:centering ellements using css?
« Reply #7 on: August 04, 2003, 03:24:20 PM »
Probably only works in IE...

-[Unknown]
Logged

Offline Joel

  • Semi-Newbie
  • *
  • Posts: 59
  • Gender: Male
Re:centering ellements using css?
« Reply #8 on: August 04, 2003, 03:33:18 PM »
Works perfectly fine for me in Mozilla and Opera.
Logged

Offline Tim

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,857
  • Gender: Male
  • Marketing Consultant
    • tim.ceuppens on Facebook
    • http://www.linkedin.com/in/timceuppens on LinkedIn
    • @timcbe on Twitter
    • Tim Ceuppens
Re:centering ellements using css?
« Reply #9 on: August 04, 2003, 03:50:15 PM »
tried it in IE aswell, and it seems to work :-/
Logged

Offline Joel

  • Semi-Newbie
  • *
  • Posts: 59
  • Gender: Male
Re:centering ellements using css?
« Reply #10 on: August 04, 2003, 04:06:21 PM »
I should warn you, however, that IE5 won't like it. Luckily, though, it screws up the CSS standard by horizontally aligning both inline and block elements with text-align. So you'll want to add the following to your stylesheet (I updated the previously linked example to account for this):

Code: [Select]
body { text-align: center; }
body * { text-align: left }
« Last Edit: August 04, 2003, 04:06:39 PM by Joel »
Logged

Offline SparkieGeek

  • Jr. Member
  • **
  • Posts: 167
  • Gender: Male
    • YaBBpak Editor
Re:centering ellements using css?
« Reply #11 on: August 18, 2003, 12:19:27 PM »
minor point: the width is 70% not 90%, I was a little scared when it claimed to be 90% wide... :)
Logged

Offline Seph|roth

  • Full Member
  • ***
  • Posts: 432
  • Gender: Male
  • Final Fantasy VII: Advent Children
    • Ultimate Weapon Fantasy Gaming Network
Re:centering ellements using css?
« Reply #12 on: August 18, 2003, 05:24:34 PM »
Quote from: [Unknown] on August 04, 2003, 03:06:13 PM
That's something I've always felt was missing from CSS 2.  There's no vertical align and the horizontal one is "text-align" which doesn't fit everything...

-[Unknown]
No vertical align? and what about the property verical-align ?
Logged

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,142
  • Gender: Male
Re:centering ellements using css?
« Reply #13 on: August 18, 2003, 05:50:24 PM »
I'll eat my hat.  I swear I'd looked for that before and not found it.

-[Unknown]
Logged

Offline Seph|roth

  • Full Member
  • ***
  • Posts: 432
  • Gender: Male
  • Final Fantasy VII: Advent Children
    • Ultimate Weapon Fantasy Gaming Network
Re:centering ellements using css?
« Reply #14 on: August 18, 2003, 05:57:13 PM »
Logged

Offline jack

  • Jr. Member
  • **
  • Posts: 382
  • Gender: Male
    • Haxed
Re:centering ellements using css?
« Reply #15 on: August 25, 2003, 06:09:59 PM »
The way I read the definition :
Quote
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.

is that it affects the alignment of the content of the block, not the position of the block itself.
Logged

Offline [Unknown]

  • SMF Friend
  • SMF Master
  • *
  • Posts: 36,142
  • Gender: Male
Re:centering ellements using css?
« Reply #16 on: August 25, 2003, 10:11:04 PM »
The same with text-align.  They are both applied to the contents.

-[Unknown]
Logged

Offline Seph|roth

  • Full Member
  • ***
  • Posts: 432
  • Gender: Male
  • Final Fantasy VII: Advent Children
    • Ultimate Weapon Fantasy Gaming Network
Re:centering ellements using css?
« Reply #17 on: August 29, 2003, 02:32:21 PM »
Quote from: [Unknown] on August 25, 2003, 10:11:04 PM
The same with text-align.  They are both applied to the contents.

-[Unknown]
yes it seems so.. i just encountered the same problem myself  >:( :P
Logged
Pages: [1]   Go Up
« previous next »