如何使用按钮居中 div（Bootstrap 响应）

Question

HTML

<div id="panel">
   <form method="POST" action="">
     <select class="form-control" id="sel1" name="veh_id">
       <option>1</option>
       <option>1</option>
       <option>1</option>
     </select>
     <input type="submit" value="GO" id="submit">
   </form>
</div>

CSS

#panel {
    position: absolute;
    left:32%;
    z-index: 5;
    background-color: transparent;
    border: dashed 2px black;
    overflow: hidden;
}
#submit {
    display: block;
    float: right;
    height: 35px;
    width: 63px;
    overflow: hidden;
}
#sel1 {
    min-width:425px;
    width:425px;
    border: none;
    float: left;
    overflow: hidden;
}

以下 div panel 在大屏幕上居中，但在手机（小屏幕）上整个 div 混淆。我努力了，但没有成功。

Answer 1

#panel {
    position: relative;
    margin: 0 auto;
    background-color: transparent;
    border: dashed 2px black;
    display: block;
    width:500px;
}
#submit {
    height: 35px;
    width: 63px;
}
#sel1 {
    min-width:425px;
    border: none;
}

把你的CSS改成这个。你这里有很多不相关的css。你应该去 MDN 看看这些 css 属性是什么意思。

居中 div，margin: 0 auto; 是一个有用的方法。将 div 设置为 width，使其 display: block. margin: 0 auto; 清除所有浮动。

http://codepen.io/anon/pen/VLjgXR

Answer 2

如果您正在使用 bootstrap 并尝试将元素居中，则不应使用向左或不向左移动元素。这可以使用 bootstrap 助手类

非常简单地完成

我不确定这是否 100% 符合要求，但应该有所帮助。我剥离了大部分提供的 css 以利用 bootstrap、

占屏幕 50% 的列（居中），类似

<div class="col-sm-6 col-sm-push-3"></div>

然后相应地设置按钮样式。我不确定为什么你在包装上有 absolute ，但如果你需要它仍然可以使用。

你也同时使用

display: block;
float: right;

这将导致按钮呈现为新行，但是你有一个固定的宽度，所以它会自动向右移动。

希望这对您有所帮助，

http://jsfiddle.net/1rLn0art/

如何使用按钮居中 div（Bootstrap 响应）

How to center div with buttons (Bootstrap Responsive)

css

resize

window-resize

responsive-design

twitter-bootstrap