SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    4
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Can't Solve This Small Thing! I Need Expert Help Please

    Sorry if this question might annoy some of you, but please bear in mind that I'm relatively new to web design and coding, I have just finished HTML and CSS and now I'm trying to adapt to it.

    Basically the problem goes like this, I want my "p" element to be at the center of a container div, like this.

    Code:
    div
    {
    width:300px;
    height:100px;
    }
    
    p
    {
    position:absolute;
    top:auto;
    }
    
    </style>
    </head>
    <body>
    
    <div><p>I want this paragraph to be at the center, but I can't.</p></div>
    If anybody could help me on this, I would be really grateful, thanks.

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    If you meant, you just wanted a paragraph to centre horizontally rather than vertically? All you need have done was: p { text-align: center; } for the paragraph. Though if you meant vertical alignment too - which I suspect - or something other please elaborate more on what you specifically were wanting to achieve. Because if you also added a margin to the P element it could give a basic centred effect.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    4
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    If you meant, you just wanted a paragraph to centre horizontally rather than vertically? All you need have done was: p { text-align: center; } for the paragraph. Though if you meant vertical alignment too - which I suspect - or something other please elaborate more on what you specifically were wanting to achieve. Because if you also added a margin to the P element it could give a centred effect.
    No actually, I want it to split the top, right, left and bottom spaces equally, like, I want it to be centered perfectly.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,807
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    add display-table to the div and replace the properties you currently have assigned to the paragraph with display: table-cell; vertical-align: middle;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    Team SitePoint
    Join Date
    Jan 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey @juleusjohn ;
    We're running a test of our live CSS problem solving product today.
    If you want to utilise our experts to get your site sorted out immediately, you can check it out here http://codefix.sitepoint.com/


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
  •