集中具有onclick元素的嵌套Divs

Question

我有2行，一個需要兩個圖像，另一個需要顯示信息，如果這些圖像被點擊。

我有一個問題集中在行div中的圖像和文本。

<div id="container"> 
<!-- Image row --> 
<div class="row"> 
    <div class="col-md-6"> 
     <div id="badbutton"><a href="#" onclick="showHide('bad')"></a></div> 
     </div> 
    <div class="col-md-6"> 
     <div id="goodbutton"><a href="#" onclick="showHide('good')"></a></div> 
    </div> 
</div> 

<!-- Text Row --> 

<div class="row"> 
    <div class="col-md-6"> 
     <div id="bad" style="display:none;"> 
      <p>Oh no! We'd appreciate it if you'd share your experience with us so we can improve in the future. Just click below to get started.</p> 
      <p> FORM HERE </p> 
     </div> 
     </div> 
    <div class="col-md-6"> 
      <div id="good" style="display:none;"> 
       <p>Fantastic! Please share your experience with the world on of these popular websites. Just make a selection below to get started.</p> 
       <ol> 
        <li>Click here to review us on Google+ Reviews</li> 
        <li>Click here to review us on Facebook</li> 
       </ol> 
      </div> 
    </div> 
</div> 
</div> 

發生了什麼事是COL-MD-6佔據該行格的45％，但裏面的按鈕不集中自己。

這裏是CSS：

.row { 
    margin: 0 auto; 
} 
.col-md-6 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 
.col-md-6 { 
    width: 45%; 
} 
#good, 
#bad { 
    width: 50%; 
} 

這裏是結果：

Answer 1

嘗試使用顯示：表 - *會作出這樣的表格上內容的行爲。

.row { 
margin: 0 auto; 
display: table-row; 
} 

.col-md-6 { 
    position: relative; 
    min-height: 1px; 
    padding-right: 15px; 
    padding-left: 15px; 

    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

Answer 2

將樣式「text-align：center」賦予「col-md-6」div。並顯示：內嵌塊到#goodbutton和#badbutton。

剛例如

#badbutton, #goodbutton { 
height: 50px; 
width: 50px; 
display: inline-block; 
background: #444; 
vertical-align: middle; 

}這裏 http://jsfiddle.net/Lw27ofb1/