集中具有onclick元素的嵌套Div

时间:2015-02-10 11:46:33

标签: javascript jquery html css

我有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%;
}

结果如下:

enter image description here

2 个答案:

答案 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;

}

示例小提琴 http://jsfiddle.net/Lw27ofb1/