DIV不會中心

Question

我很難將兩個相鄰的DIV水平對中。其父母「JoinSubWrap」中的兩個div「JoinSub」現在左移而不居中。父div有自動保證金，我認爲它會將父母和孩子都居中。

這裏是我的HTML

<div id=JoinSubfooter> 
    <div id="JoinSubfooter-wrapper"> 
     <div id="subft-line"></div> 
     <div id="JoinSft-msg-block">Some Text Goes Here</div> 

     <div id="JoinSubWrap"> 
      <div id="JoinSub"> 
       <h2>Title 1</h2> 
       <p>message goes here</p> 
      </div> 

      <div id="JoinSub"> 
       <h2>Title 2</h2> 
       <p>message goes here</p> 
      </div> 
     </div> 

    </div> 
</div> 

這裏是我的CSS

#JoinSubfooter { 
    width: 100%; 
    height: 300px; 
    background: transparent url(../images/grey_body_noise.png); 
    clear: both;/*Clears all columns and sets the footer at the bottom*/ 
} 

#JoinSubfooter-wrapper { 
    width:981px; 
    margin: 0 auto; 
    padding: 10px 0px 10px 0px; 
    text-align:center; 
} 

#JoinSft-msg-block { 
    background: transparent url(../images/grey_opaque_pixel.png); 
    border: 1px solid #CCCCCC; 
    color:#FFFFFF; 
    display:inline-block; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:24px; 
    font-weight: bold; 
    margin: 30px 0px 0px 0px; 
    padding: 10px 20px 10px 20px; 
} 

#JoinSubWrap { 
    margin: 0 auto; 
} 

#JoinSub { 
    float:left; 
    margin: 20px 0px 0px 0px; 
    padding: 0px 12px 12px 12px; 
    width: 200px; 
    border-right: solid #666666 1px; 
} 

#JoinSub:last-child { 
    border: 0px; 
} 

#JoinSub h2{ 
    font-size: 1.5em; 
    font-weight: bold; 
} 

Answer 1

#JoinSubWrap { 
    margin: 0 auto; 
    display: table; 
} 

添加display:table。

http://jsfiddle.net/Eq5gL/

Answer 2

試試這個隊友：

<div id=JoinSubfooter> 
    <div id="JoinSubfooter-wrapper"> 
     <div id="subft-line"></div> 
     <div id="JoinSft-msg-block">Some Text Goes Here</div> 

    <div id="JoinSubWrap"> 
     <div class="JoinSub"> 
      <h2>Title 1</h2> 
      <p>message goes here</p> 
     </div> 

     <div class="JoinSub"> 
      <h2>Title 2</h2> 
      <p>message goes here</p> 
     </div> 
    </div> 

    </div> 
    </div> 

和CSS

#JoinSubfooter { 
    width: 100%; 
    height: 300px; 
    background: transparent url(../images/grey_body_noise.png); 
    clear: both;/*Clears all columns and sets the footer at the bottom*/ 
} 

    #JoinSubfooter-wrapper { 
    width:981px; 
    margin: 0 auto; 
    padding: 10px 0px 10px 0px; 
    text-align:center; 
} 

    #JoinSft-msg-block { 
    background: transparent url(../images/grey_opaque_pixel.png); 
    border: 1px solid #CCCCCC; 
    color:#FFFFFF; 
    display:inline-block; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:24px; 
    font-weight: bold; 
    margin: 30px 0px 0px 0px; 
    padding: 10px 20px 10px 20px; 
    } 

    #JoinSubWrap { 
    margin: 0 auto; 
    text-align:center; 
    } 

    .JoinSub { 
    margin: 20px 0px 0px 0px; 
    padding: 0px 12px 12px 12px; 
    width: 200px; 
    border-right: solid #666666 1px; 
    margin: 0 auto; 
    overflow:hidden; 
    display:inline-block; 
    } 

    #JoinSub:last-child { 
    border: 0px; 
    } 

    #JoinSub h2{ 
    font-size: 1.5em; 
    font-weight: bold; 
    } 

和小提琴鏈接： http://jsfiddle.net/mu42P/