SitePoint Sponsor

User Tag List

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

    making the center span to be centered

    Code:
    <!doctype html> 
    <html>   
      <head> 
        <meta charset="UTF-8"> 
        <title>3spans</title> 
      </head> 
    <style type="text/css">
    .wrapper {
     margin:0px auto;
     text-align:left;
     border:0px; 
     overflow:hidden;
    clear:left;
    }
    .center {
     float:left;
     width:100%;
     margin:0 -250px 0 -250px;
    }
    .content {
     margin:0 250px 0 250px;
     border:2px solid green;
    padding:5px;
    border-collapse:collapse;
    word-wrap: break-word;
    z-index:1;}
    .left {
     width:250px;
     float:left;
    }
    .right {
     width:250px;
     position:relative;
     float:right;
     z-index:2;
    }
    </style>
    <body> 
    <div class="wrapper">
      <div class="left">left column</div>  
      <div class="center"> 
      <div class="content"> 
        content created by a user<br>
        content created by a user<br>
        content created by a user<br>
        content created by a user<br>
        content created by a user<br><br>
    
         <div style="width:100%">
              <span>left span</span>
              <span style="text-align:center;margin:auto;background-color:red;color:white">center span</span>
              <span style="float:right">right span</span>
         </div>   
      </div>
      </div>   
      <div class="right">right column</div>  
    </div> 
    </body> 
    </html>
    I have the code above at http://dot.kr/x-test/3spans.php .
    I like to make the text "center span" which is red backgrounded to be centered.

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put text-align:center on the parent div to center the center <span>, and float:left for the left <span>, float:right for the right <span>.

    Loose the nonsense: style="text-align:center;margin:auto; in the center <span>!

    Or widths on <span>s. These don't work on inline elements like <span>, unless you use a proper CSS display value to change that.


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
  •