CSS will not center

Discussion in 'HTML' started by alice, Jul 21, 2007.

  1. alice

    alice Guest

    Can someone tell me why, or for that matter how it's even possible,
    that text placed between this span with this class would not be
    centered?

    ..heading {
    font: small-caps normal 18px Georgia, "Times New Roman", Times,
    serif;
    text-transform: uppercase;
    text-decoration: underline;
    padding: 8px;
    background: #232323;
    text-align: center;
    clear: both;
    margin-right: auto;
    margin-left: auto; }

    All the other attributes are working, like the font and background.
    What am I doing wrong? I've tried adding the inline style="text-
    align:center" and that will not do anything either. I've tried it
    without the left and right auto margins as well.
    alice, Jul 21, 2007
    #1
    1. Advertising

  2. Hi!

    I guess you will have to make this span a block-level element. span
    is an inline element. If you do then you should also specify a
    width as otherwise the element streches across the whole screen
    (the width of its parent container-element, respectively):

    display:block;
    width:100px;

    Alternatively you may drop the "display" rule and just replace span
    with a div element, which works the same way like span except it
    already is a block level element.

    bye

    alice <> wrote:

    > Can someone tell me why, or for that matter how it's even
    > possible, that text placed between this span with this class
    > would not be centered?
    >
    > .heading {
    > font: small-caps normal 18px Georgia, "Times New Roman",
    > Times,
    > serif;
    > text-transform: uppercase;
    > text-decoration: underline;
    > padding: 8px;
    > background: #232323;
    > text-align: center;
    > clear: both;
    > margin-right: auto;
    > margin-left: auto; }
    >
    > All the other attributes are working, like the font and
    > background. What am I doing wrong? I've tried adding the inline
    > style="text- align:center" and that will not do anything either.
    > I've tried it without the left and right auto margins as well.
    >
    >
    Benjamin Sattler, Jul 21, 2007
    #2
    1. Advertising

  3. Scripsit alice:

    > Can someone tell me why, or for that matter how it's even possible,
    > that text placed between this span with this class would not be
    > centered?


    The text-align property applies to block elements only. You could set
    display: block, but...

    > .heading {


    .... since you really seem to have a heading, please read a good book on web
    design, in order to get cured from SPANitis and DIVitis. When you then use
    proper markup, such as <h1>...</h1> for the main heading, the problem
    vanishes in a puff of logic (as a side effect, since h1 is block level by
    default).

    > font: small-caps normal 18px Georgia, "Times New Roman", Times,
    > serif;


    Did you know that browsers don't really use small-caps? They just fake it by
    changing font size, making typographers aggravated.

    The good book on web design will tell you why px is a wrong unit for
    font-size. Use something like font-size: 140% instead.

    > text-transform: uppercase;


    Did you know that all-uppercase text is less readable and often ignored as
    SHOUTING?

    > text-decoration: underline;


    The good book will tell you why should not underline anything that is not a
    link.

    > background: #232323;


    What happens when the text color is #232323? Hint: It could be. You are
    apparently not doing anything to prevent that.

    > margin-right: auto;
    > margin-left: auto; }


    Horizontal margins have no effect on non-replaced inline elements, by CSS
    specs.

    > All the other attributes are working,


    They are not attributes, and they mostly "work" for some odd values for
    "work" only.

    > What am I doing wrong?


    To be honest, in this case, pretty much everything*). But it's curable.
    There are many good books on web design. Hanging around in Usenet groups may
    help a little, too.

    *) However, the problem you regard as problem is easily fixable, as
    mentioned. It's actually one of the _small_ problems.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jul 21, 2007
    #3
  4. alice

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sat, 21 Jul 2007 20:12:08 GMT
    Benjamin Sattler scribed:

    > Hi!
    >
    > I guess you will have to make this span a block-level element. span
    > is an inline element. If you do then you should also specify a
    > width as otherwise the element streches across the whole screen
    > (the width of its parent container-element, respectively):
    >
    > display:block;
    > width:100px;
    >
    > Alternatively you may drop the "display" rule and just replace span
    > with a div element, which works the same way like span except it
    > already is a block level element.
    >
    > bye


    Nice x-face, Benny. But are you really as smart as you look? Top-posting
    suggests a contrary answer.

    --
    Neredbojias
    Half lies are worth twice as much as little fibs.
    Neredbojias, Jul 22, 2007
    #4
  5. Neredbojias <> wrote:

    > Well bust mah britches and call me cheeky, on Sat, 21 Jul 2007
    > 20:12:08 GMT Benjamin Sattler scribed:
    >
    > Nice x-face, Benny. But are you really as smart as you look?
    > Top-posting suggests a contrary answer.
    >


    hrmpf... I will try and do better... Definitely :)
    Benjamin Sattler, Jul 22, 2007
    #5
  6. alice

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sun, 22 Jul 2007 09:55:19 GMT
    Benjamin Sattler scribed:

    > Neredbojias <> wrote:
    >
    >> Well bust mah britches and call me cheeky, on Sat, 21 Jul 2007
    >> 20:12:08 GMT Benjamin Sattler scribed:
    >>
    >> Nice x-face, Benny. But are you really as smart as you look?
    >> Top-posting suggests a contrary answer.
    >>

    >
    > hrmpf... I will try and do better... Definitely :)


    Sorry, I'm just a natural-born smart-ass. Too old to change now. (But
    Duende is the _official_ group geezer.)

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Jul 22, 2007
    #6
  7. alice

    Duende Guest

    On 22 Jul 2007 Neredbojias wrote in alt.html

    > Well bust mah britches and call me cheeky, on Sun, 22 Jul 2007 09:55:19
    > GMT Benjamin Sattler scribed:
    >
    >> Neredbojias <> wrote:
    >>
    >>> Well bust mah britches and call me cheeky, on Sat, 21 Jul 2007
    >>> 20:12:08 GMT Benjamin Sattler scribed:
    >>>
    >>> Nice x-face, Benny. But are you really as smart as you look?
    >>> Top-posting suggests a contrary answer.
    >>>

    >>
    >> hrmpf... I will try and do better... Definitely :)

    >
    > Sorry, I'm just a natural-born smart-ass. Too old to change now. (But
    > Duende is the _official_ group geezer.)
    >


    More like wheezer. :(



    --
    D?
    Duende, Jul 22, 2007
    #7
  8. alice

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sun, 22 Jul 2007 18:19:17 GMT
    Duende scribed:

    >>>> Nice x-face, Benny. But are you really as smart as you look?
    >>>> Top-posting suggests a contrary answer.
    >>>>
    >>>
    >>> hrmpf... I will try and do better... Definitely :)

    >>
    >> Sorry, I'm just a natural-born smart-ass. Too old to change now. (But
    >> Duende is the _official_ group geezer.)
    >>

    >
    > More like wheezer. :(


    Breathing problems? Ah, am there, doin' that. Azma, emfizzeema, cope, you
    name it. I got more inhalers than topless dancers have g-strings.
    'Course, there _is_ a bright side. "What is it?" says you. "Well, let me
    tell ya," says I. Provides a good excuse for those pesky feelings of self-
    recrimination. Lack of oxygen to the brain and all that...

    What happened to Puddin' Pete? Didn't set right with you? (Nyuk, nyuk.)

    Btw, did you see that new Australian TSA stamp? -A philatelist's dream.

    http://tinyurl.com/yuyzdr

    ....Heard they're gonna issue a whole series. Just can't wait to collect
    'em.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Jul 23, 2007
    #8
  9. On 22 Jul 2007 Neredbojias wrote in alt.html

    > What happened to Puddin' Pete? Didn't set right with you? (Nyuk, nyuk.)
    >
    > Btw, did you see that new Australian TSA stamp? -A philatelist's dream.
    >
    > http://tinyurl.com/yuyzdr
    >


    How cool, brucie on a stamp.

    --
    D?
    Yorkshire Pete
    http://yorkshirepete.com/
    Yorkshire Pete, Jul 23, 2007
    #9
  10. alice

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Mon, 23 Jul 2007 17:58:42
    GMT Yorkshire Pete scribed:

    > On 22 Jul 2007 Neredbojias wrote in alt.html
    >
    >> What happened to Puddin' Pete? Didn't set right with you? (Nyuk,
    >> nyuk.)
    >>
    >> Btw, did you see that new Australian TSA stamp? -A philatelist's
    >> dream.
    >>
    >> http://tinyurl.com/yuyzdr
    >>

    >
    > How cool, brucie on a stamp.


    Brucie? Nah, think more schizophrenic.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
    Neredbojias, Jul 24, 2007
    #10
  11. alice

    alice Guest


    >
    > > What am I doing wrong?

    >
    > To be honest, in this case, pretty much everything*). But it's curable.
    > There are many good books on web design. Hanging around in Usenet groups may
    > help a little, too.
    >


    Actually, there are reason that most of the code is the way it is,
    including the underlining, so really I was not doing pretty much
    everything wrong. Thanks for trying though.
    alice, Jul 31, 2007
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. brucie

    Re: [css] center

    brucie, Jun 22, 2003, in forum: HTML
    Replies:
    0
    Views:
    1,415
    brucie
    Jun 22, 2003
  2. shank

    CSS and center align

    shank, Sep 29, 2003, in forum: HTML
    Replies:
    7
    Views:
    27,963
    b_imam77
    Dec 30, 2008
  3. Joshua Beall
    Replies:
    9
    Views:
    956
    Owen Jacobson
    Nov 1, 2003
  4. Quijote

    Center Box with CSS

    Quijote, May 8, 2004, in forum: HTML
    Replies:
    2
    Views:
    704
    Gnarlodious
    May 8, 2004
  5. Dennis Marks

    Replacement for <center> in CSS

    Dennis Marks, May 25, 2004, in forum: HTML
    Replies:
    8
    Views:
    8,883
    Leif K-Brooks
    May 25, 2004
Loading...

Share This Page