Results 1 to 14 of 14
  1. #1

    Center page but keep text left aligned

    Hey guys, i got another question about css and html coding. Is there a way to center a page when at the same time keeping the text aligned left.

    For example, on this page,

    http://services.georgiasouthern.edu/....php#hazardcom

    I want the list centered but keep it all left aligned within the center

    Hope that makes sense

    Thanks for the help

  2. #2
    Join Date
    Mar 2004
    Posts
    999
    Everything looks correct to me, text is already left-aligned.

    Anyway, you should use "margin: 0 auto;" in body and "text-align:center;" for text to get what you want.

  3. #3
    I know but I want it centered in the middle of the page but the text not centered

  4. #4
    Join Date
    Jun 2006
    Location
    Scotland
    Posts
    17
    I would just use a wrapper:

    Simple example:

    HTML:
    <head>
    <title>Test Page</title>
    <style type="text/css">
    BODY{
    text-align:center;
    }
    #wrapper{
    text-align:left;
    width:600px;
    }
    </style>
    </head>

    <body>
    <div id="wrapper">My Text </div>
    </body>
    E.g. makes area 600px wide (relative to center of the webpage) but text is now on left .

    Hope thats not too confusing.

  5. #5
    Centering in Firefox might help you somewhat. When I had this issue, I was searching for different scenarios and I came across this one which helped me.

    And then you create another divide and align that text to the left.
    John

  6. #6
    Join Date
    Dec 2003
    Location
    Vancouver BC, eh?
    Posts
    570
    You can create another div that wraps the list, with a smaller width, centered (so its closer in the middle) and make sure the text-align is left for the list items.

  7. #7
    I tried this but it didnt seem to work

    Code:
    <style type="text/css">
    ul 
    {
    list-style-image: url('images/arrow2.gif')
    }
    
    body 
    {
    text-align:center;
    }
    #container 
    {
    text-align:left; margin:0 auto; width:600px;}
    
    </style>
    http://services.georgiasouthern.edu/....php#hazardcom
    Here is the link

  8. #8
    Join Date
    Dec 2003
    Location
    Vancouver BC, eh?
    Posts
    570
    add:

    #secondcontainer
    {
    width: 200px;
    }

    with all the centering. So this div is inside the container div.

  9. #9
    Join Date
    Jun 2006
    Location
    Scotland
    Posts
    17
    Quote Originally Posted by VeritasDavid
    I tried this but it didnt seem to work

    Code:
    <style type="text/css">
    ul 
    {
    list-style-image: url('images/arrow2.gif')
    }
     
    body 
    {
    text-align:center;
    }
    #container 
    {
    text-align:left; margin:0 auto; width:600px;}
     
    </style>
    http://services.georgiasouthern.edu/....php#hazardcom
    Here is the link
    This works for me .

  10. #10
    hmm are you sure. I see it semi-centered in IE but not at all in FF

    Man I thought css was supposed to make things easier not harder

  11. #11
    Join Date
    Aug 2006
    Posts
    35
    You got it already. Just needs a minor adjustment to this div.

    #container {
    margin: 0 auto;
    width:400px;
    padding: 0;
    }

  12. #12
    i got it almost working in IE but not at all in FF. Now how can i make the text left alligned?

  13. #13
    Join Date
    Oct 2006
    Location
    Salt Lake City, UT
    Posts
    849
    Just make a table centered and left align the contents inside..

  14. #14
    Join Date
    Apr 2005
    Posts
    51
    Quote Originally Posted by VeritasDavid
    i got it almost working in IE but not at all in FF. Now how can i make the text left alligned?
    Text is left aligned by 'default'

    Take a look at this 2 examples:

    1. Centering: Auto-width Margins (recommended)

    2. Centering: Negative Margin

    it certainly work!


    If you wanna learn about List:

    1. Listamatic (by example, excellent!!)
    2. CSS Design: Taming Lists by Mark NewHouse (published on A List Apart)
    Last edited by xTiNcTion; 12-05-2006 at 12:09 AM. Reason: added List comment

    xTiNcTion

Posting Permissions

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