Question

使用我的Bootstrap 3.0网站，我很难在浏览器缩小时保持图像居中。当屏幕低于某个宽度时，图像会跳到屏幕的左侧，不再居中。我的代码是：

#sliderScale {
		opacity: 0.6;/* 0.4; */
		filter: alpha(opacity=60); /*alpha(opacity=40);*/ /* For IE8 and earlier */
		width:311px;
		max-width:311px;
		padding:0px;
		margin: 0 auto;
	} 
#maxCostSlider {
		max-width:304px;
		width:304px;
		padding:0px;
		margin-left:-6px;
	}
	
	@media (max-width: 480px) {
    #maxCostSlider,#sliderScale {
        margin-left: 20px;
        margin-right: 20px;
		max-width: 260px;
    }
	}

    <div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4" style="padding-left:4px;padding-right:4px">
            <img id="sliderScale" src="/assets/img/price slider 1.png" alt="" class="img-responsive"/>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-md-offset-4 col-md-4" style="margin-top:-44px;padding-left:4px;padding-right:4px">
            <input id="maxCost" data-slider-id='maxCostSlider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="40" />
            </div>
        </div>
    </div>

数据滑块正确居中但不是sliderScale。

Answer 1

尝试将此添加到#sliderScale css标记：

 margin: 0 auto !important;

通过添加重要内容，您可以确保没有任何内容可以覆盖它。

Answer 2

这应该有帮助，您的媒体查询导致了问题：

JSFIDDLE

@media (max-width: 480px) {
#maxCostSlider,#sliderScale {
    max-width: 100%;
}}

试一试！

Answer 3

当使用col-md-offset-4 col-md-4时，如果屏幕缩小到SM或XS大小，还会添加col-sm或xs-（您想要的任何地方），它将获取该代码。希望这有帮助。

Answer 4

在以下div上添加.text-center类或使用text-align: center扩展样式属性：

<div class="col-md-offset-4 col-md-4 text-center"></div>

Bootstrap - 如何在浏览器缩小时保持图像居中

4 个答案: