我有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占据了行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%;
}
结果如下:
答案 0 :(得分:0)
尝试使用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;
}
答案 1 :(得分:0)
将样式“text-align:center”赋予“col-md-6”div。并显示:内联块到#goodbutton和#badbutton。
仅举例来说
#badbutton, #goodbutton {
height: 50px;
width: 50px;
display: inline-block;
background: #444;
vertical-align: middle;
}