SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble centering a span

    Here is the code I am trying to center

    Code:
    <table id="maincontent">
    			  <tr> 
    				<td> <h2><cfoutput>#title#</cfoutput></h2>
    	<span id="recordcount">There are currently <cfoutput>#content.RecordCount#</cfoutput> items.</span>
    	</td>
    			  </tr>
    The span is what I am trying to center.

    Here is what I have in my style sheet

    Code:
    span#recordcount {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: bold;
     color: #003366;
     text-decoration: none;
     margin-right: auto;
     margin-left: auto;
    }
    But it won't center. Problem???

    Thanks
    Bryan

  2. #2
    011521 dbalsdon's Avatar
    Join Date
    Feb 2003
    Location
    North Of Scotland
    Posts
    444
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried using text-align: center;?

    i'm not sure why using margin-right: auto; and margin-left: auto; doesnt work.. i couldnt get it too work either.
    Daniel Balsdon
    My Site

  3. #3
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    span is not a block element.
    To turn it into a block element insert this into your css:
    display: block;

  4. #4
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or just use a <div> instead of a <span> which seems to be more correct from what I can see of your code

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    i'm not sure why using margin-right: auto; and margin-left: auto; doesnt work.. i couldnt get it too work either.
    In order for margin-left:auto and margin:right auto to centre an element the element needs to be block level. Also the element needs to have a specified width otherwise the browser is unable to work out the dimensions. (It will not work if you just change your code to a div (as recommended above) you need to add a width as well.)

    In fact you don't actually need it anyway as you can just use text-align center to centre the text as you do not need to centre the element itself.
    Code:
    p#recordcount {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    color: #003366;
    text-decoration: none;
    text-align:center;
    }
    Then change your span tag in the html to a <p> tag (as it really is a paragraph and not another div).

    Hope this helps.

    Paul

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks, I will try that.

    Bryan

  7. #7
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is my new code

    Code:
    div#recordcount {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: bold;
     color: #003366;
     text-decoration: none;
     margin-right: auto;
     margin-left: auto;
    }
    along with

    <div id="recordcount">There are currently <cfoutput>#content.RecordCount#</cfoutput> items.</div>

    It didn't work

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey paul, my response was before you had posted, so what you recommended worked. Though I didn't take the<p> route, I just added a div and set it to margin-right: auto, margin-left: auto and text-align:center

    Thanks

    Just for curiosities sake, did you mean to have it like such
    [code]
    <div id="recordcount"><p>BLAH BLAH</p></div>

    or <p id="recordcount">blah blah </p>
    ???

  9. #9
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pardon me for butting in, but Paul probably meant this:
    Code:
    <p id="recordcount">blah blah </p>
    As he says, the content is a paragraph, so you may as well mark it up as such

  10. #10
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I appreciate it

    Bryan

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    This one:
    <p id="recordcount">blah blah </p>
    The div option will work I just thought it was neater to use a <p> instead of a <div>.
    Code:
    p#recordcount {etc..
    You don't need the margin:auto etc. as it's not doing anything (as explained in my other post).

    Hope this helps.

    Paul

    Edit:


    Thanks blufive I must learn to type faster .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •