www.webdeveloper.com
Results 1 to 6 of 6

Thread: content positioning

  1. #1
    Join Date
    Nov 2013
    Posts
    4

    content positioning

    Hi guys. So background-position will decide the position for a background image. But how do you decide the position for anything else. like how do you center the following? thx.

    <style>
    section {
    width:150px;
    height:150px;
    border:1px solid black;
    }
    p {
    display:inline;
    background-color:red;
    position:center; /* ???? */
    }
    </style>
    </head>
    <body>
    <section>
    <p> hello </p>
    </section>
    </body>

  2. #2
    Join Date
    Nov 2013
    Posts
    41
    To position a block element use:
    Code:
    margin: auto 0px;                 // Where 0px is the top & bottom margins
    // OR
    margin: 0px auto 0px auto;    // Where the first 0px is the top and the second is the bottom
    // OR
    margin: auto;                      // Where all margins are centered
    To center-align text:
    Code:
    text-align: center;               // Will center the text
    // OR
    text-align: justify;               // Will justify the text
    USE CODE AND HTML TAGS!!!

  3. #3
    Join Date
    Nov 2013
    Posts
    4
    hmm... awesome stuff thank you. I still can't get the text itself to center though. text-align:center; got me half way there, how do i get it exactly in the center of the div?

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there mdjaradat,

    and a warm welcome to these forums.

    Does this example help...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    section {
        display:table;
        width:150px;
        height:150px;
        margin:20px auto 0;
        border:1px solid #000;
        border-radius:5px;
        background-color:#fff;
        box-shadow:inset 0 0 10px #666;
     }
    p {
        display:table-cell;
        vertical-align:middle;
        text-align:center;
     }
    p span {
        padding:5px;
        border:1px solid #000;
        border-radius:3px;
        box-shadow:0 0 10px #666;
        background-color:#f00;
     }
    </style>
    
    </head>
    <body>
    
    <section>
     <p>
      <span>hello</span>
     </p>
    </section>
    
    </body>
    </html>
    coothead

  5. #5
    Join Date
    Nov 2013
    Posts
    4
    that explained it perfectly appreciated!

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478

    No problem, you're very welcome.


    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles