SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Thread: div alignment

  1. #1
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div alignment

    Hi All,
    Can anyone help on this.

    What is the way to align a div center and having width as Auto.

    When I set margin auto and specify a width for example
    <div style="width:200px;margin:auto;">Any Text</div>. It is centrally align. But when I specify width as auto it aligns to left for example
    <div style="width:auto;margin:auto;">Any Text</div>

    Any solution?
    Zia Awan

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    You need a width to center an element.. without some pretty complicated stuff.
    Why do you want the width as auto ?

  3. #3
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dear markbrown4, thank you for your quick reply.
    Regarding your question "Why do you want the width as auto", well sometimes I don't know what text it can be inside a div. So I want div to expand whatever may be the length of the text and align as center. In this case I don't know how to assign a width to a div. Any idea?
    Zia Awan

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    I always just set a fixed width so I can have greater control over the presentation - though I did find this which might give you some ideas.

    http://www.pmob.co.uk/temp/vertical-align11.htm
    Here's the crux of the solution:
    Code:
    .outer {
    	position:relative;
    	left:50&#37;;
    	float:left;
    }
    .inner {
    	position:relative;
    	left:-50%;
    }
    The only downside to this centering method is that it can sometimes cause unwanted scroll bars because relative positioning leaves a footprint.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That footprint being that the element isn't really moved, but is instead tricking your eye into thinking it's been moved.

  6. #6
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys for your help. But it was still having a problem i.e. if someone needs a border around the text. In this case the border was not at the right place. But you guys gave me an idea. So I put a span around it with a border.
    And I used this.
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>misc</title>
    <meta name="Author" content="Ilkka Huotari" />
    <style type="text/css">
    body
    {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:11px;
    }
    .outer {
    	position:relative;
    	left:50%;
    	float:left;
     
    }
    .inner {
    	position:relative;
    	left:-50%;
     
    }
    </style>
    </head>
    <body style="background-color:#FFFFF5">
    <div class="outer" >
    	<div class="inner">
    		<span style="border:1px solid red;">This is my text  This is my text  This is my text</span>
    	</div>
    </div>
    </body>
    </html>

    It solved my problem. Guys, thank you very much again, see u in any other post.
    Zia Awan

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Glad you got it sorted, and remember to clear your floats

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    is this not simpler ?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    background:#FFFFF5;
    }
    .outer{background:#ffccff;text-align:center;padding:1px 0;}
    .outer span{border:1px solid red;background:#ccccff;}
    </style>
    </head>
    <body>
    
    <div class="outer">
    
    <span>This is my text  This is my text  This is my text xxxxxxx</span>
    
    </div>
    
    </body>
    </html>

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Yes it is, if you only want inline elements in the centered container.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mark
    The only downside to this centering method is that it can sometimes cause unwanted scroll bars because
    This can be fixed by wrapping the elements in another div and applying overflow:hidden which resolves the issue completely (and I must update my page). (You can use an existing wrapper for this if you don't need any overflow.)

  11. #11
    SitePoint Zealot xiaawan's Avatar
    Join Date
    Sep 2007
    Location
    Islamabad, Pakistan
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all of you guys, before starting this post I never thought it would give me so much knowledge. I really had some great views from you experts.
    Zia Awan


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
  •