SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Centering div

    I want to simply center text on a page...
    I started doing this by creating a div, and then setting the width to a specific number and applying auto left/right margins.
    However, all it is is text. So when changing the width, the centering changes. It doesn't appear to be center anyway, just relatively center.

    My other problem is I'd like to have it centered vertically as well. How would I achieve this?

    This is specifically what I'm trying to center:
    HTML Code:
    	<div id="content">
    		<p>Link 1</p>
    		<p>Link 2</p>
    		<p>Link 3</p>
    	</div>

  2. #2
    SitePoint Evangelist Maujor's Avatar
    Join Date
    Mar 2005
    Location
    Rio de Janeiro - Brazil - South America
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mauricio Samy Silva
    http://www.maujor.com/

  3. #3
    SitePoint Member
    Join Date
    Mar 2006
    Location
    Poconos, Pennsylvania
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using text-align: center ? It should auto center within the content box.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,195
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi Minii. Welcome to the forums.

    Quote Originally Posted by Minii View Post
    It doesn't appear to be center anyway, just relatively center.
    Yes, you are only centering the box there, not the text. (If you but a background color n the div you will see that it is centered ... unless some other CSS is interfering with the positioning).

    If you want each line of text centered, do what Brian suggested. Vertical centering is a little harder. Let us know if Maujor's link doesn't help.

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    width: 800px; margin: 0 auto can be used to center align block elements (width is required, won't work otherwise). To center the text contents inside an element, use text-align: center


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
  •