[英]Centralising nested Divs which have onclick elements
我有兩行,一行需要兩張圖像,另一行需要顯示信息(如果單擊這些圖像)。
我在集中行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占據了行div的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%;
}
結果如下:
嘗試使用display:table- *,它將使您的元素行為像表一樣。
.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;
}
將樣式“ 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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.