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

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>
	

数据 slider 正确居中，但 sliderScale 不居中。

Answer 1

尝试将其添加到您的#sliderScale css 标签中:

 margin: 0 auto !important;

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