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/

DIV不会居中

2 个答案: