SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: align center

  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,207
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    align center

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>spanLogo2</title>
    <style type="text/css">
    
    
    *{margin:0;padding:0}
    .inline-block{display:inline-block}
    .bdr3{border:2px solid #00f}
    .pdg5{padding:5px}
    .bdr15{border-radius:15px}
    
    .floatRight {float:right}
    
    .backgroundYellow{background:yellow}
    
    </style>
    </head>
    <body class="pdg5">
    
    <div style="background:yellow">
      <span class="inline-block bdr3 pdg5 bdr15">logo  9999</span>
      center
      <span class="inline-block bdr3 pdg5 bdr15 floatRight">logIn 555</span>
    </div>
    </body>
    </html>
    I have the code above and its output at http://dot.kr/x-test/layOut/spanLogo2.php
    I like to make the text center to be centered.

    The code below is one of my trials for it.
    Code:
    .marginAuto{margin:auto}
    
    <span class="maginAuto">center</span>

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dotJoon View Post
    I have the code above and its output at http://dot.kr/x-test/layOut/spanLogo2.php
    I like to make the text center to be centered.

    The code below is one of my trials for it.
    Code:
    .marginAuto{margin:auto}
    
    <span class="maginAuto">center</span>
    Anything set to inline or inline-block is only as wide as it needs to be to contain its contents. So aligning or centering the text within the <span> makes no difference, because the <span> is exactly as wide as the text and no more. You need to put text-align:center; on the <div>, not the <span>.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,207
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    You need to put text-align:center; on the <div>, not the <span>.
    The code below is the version of DIV at http://dot.kr/x-test/layOut/divLogo2.php, instead of SPAN at http://dot.kr/x-test/layOut/spanLogo2.php.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>round corners</title>
    <style type="text/css">
    
    *{margin:0;padding:0}
    .inline-block{display:inline-block}
    .bdr3{border:2px solid #00f}
    .pdg5{padding:5px}
    .bdr15{border-radius:15px}
    .floatRight {float:right}
    .backgroundYellow{background:yellow}	
    </style>
    </head>
    
    <body class="pdg5">
    
    <div class="backgroundYellow">
      <div class="inline-block bdr3 pdg5 bdr15">logo</div>
      center
      <div class="inline-block bdr3 pdg5 bdr15 floatRight">logIn</div>
    </div>
    </body>
    </html>
    In order to make the text "center", I tried like the below at http://dot.kr/x-test/layOut/divLogo2_1.php.
    Code:
    .marginAuto{margin:auto}
    
    <div class="maginAuto">center</div>
    The output of the code above is that the text "center" and the box "logIn" are unexpectedly dropped.

  4. #4
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Ah, I see what you are trying to do now.

    What you need to do is to have something like this:
    HTML Code:
    <div id="top-bar">
    <div id="login">Log in</div>
    <div id="logo">Logo</div>
    Center</div>
    Code css:
    #top-bar {background:yellow; text-align:center; overflow:hidden;}
    #login {float:right; border:2px solid #00f; border-radius:15px; padding: 5px}
    #logo {float:left; border:2px solid #00f; border-radius:15px; padding: 5px}
    Note the order - you have the float:right first, then the float:left, then the middle text. If you do it in any other order it will break. Notice also the meaningful names I've given to the styles, rather than defining each individual bit of styling separately.

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,207
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Ah, I see what you are trying to do now.

    What you need to do is to have something like this:
    HTML Code:
    <div id="top-bar">
    <div id="login">Log in</div>
    <div id="logo">Logo</div>
    Center</div>
    Code css:
    #top-bar {background:yellow; text-align:center; overflow:hidden;}
    #login {float:right; border:2px solid #00f; border-radius:15px; padding: 5px}
    #logo {float:left; border:2px solid #00f; border-radius:15px; padding: 5px}
    Your code works fine at http://dot.kr/x-test/layOut/3cols.php.

    I like to make the text "center" in a pink box, so I made the code below at http://dot.kr/x-test/layOut/3cols2.php
    .
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>round corners</title>
    <style type="text/css">
    #top-bar {background:yellow;text-align:center;overflow:hidden;}
    #login{float:right;border:2px solid #00f;border-radius:15px;padding: 5px}
    #logo{float:left;border:2px solid #00f;border-radius:15px;padding: 5px}
    
    #center{background:pink;margin:auto;padding:5px}
    </style>
    </head>
    <body class="pdg5">
    
    
    <div id="top-bar">
      <div id="login">Log in</div>
      <div id="logo">Logo</div>
      <div id="center">center<div>
    </div>
    
    
    </body>
    </html>
    The pink box is unexpectedly widely speaded with the code above.
    How can I put the pink box in the center, as small as the text "center" instead of spreaded widely.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dotJoon View Post
    How can I put the pink box in the center, as small as the text "center" instead of spreaded widely.
    A few options, such as

    Code:
    #center {display: table;}

  7. #7
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,820
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dotJoon View Post
    Your code works fine at http://dot.kr/x-test/layOut/3cols.php.

    I like to make the text "center" in a pink box, so I made the code below at http://dot.kr/x-test/layOut/3cols2.php
    .
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>round corners</title>
    <style type="text/css">
    #top-bar {background:yellow;text-align:center;overflow:hidden;}
    #login{float:right;border:2px solid #00f;border-radius:15px;padding: 5px}
    #logo{float:left;border:2px solid #00f;border-radius:15px;padding: 5px}
    
    #center{background:pink;margin:auto;padding:5px}
    </style>
    </head>
    <body class="pdg5">
    
    
    <div id="top-bar">
      <div id="login">Log in</div>
      <div id="logo">Logo</div>
      <div id="center">center<div>
    </div>
    
    
    </body>
    </html>
    The pink box is unexpectedly widely speaded with the code above.
    How can I put the pink box in the center, as small as the text "center" instead of spreaded widely.
    display:inline-block should do the trick.


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
  •