Question

我正在使用bootstrap 3.0并且由于某些原因我不知道，当重新调整窗口大小时，中心的图像继续移动，这是我的html到目前为止

    <div class="text-vertical-center">

        <img id="output" class="img-responsive img-center" src="http://s15.postimg.org/seg9dex3f/output2.png" alt="">
        <h3>This is some cool text</h3>
        <br>
        <button type="submit" class="btn btn-success">
            <i class="fa fa-envelope-o fa-fw fa-2x"></i>
        </button>


    </div>
</header>

这是我的CSS

#output{
display: table;
position: relative;
padding-left: 35%;


}

我必须将填充率设置为35％，因为默认情况下图像一直向左，因此35％在我的“全屏窗口”中居中但是当重新调整图像大小时开始移动因为这个。

如果有人可以告诉我，我会很感激，谢谢。

Answer 1

为什么要在图片上使用display: table ...？

改为display:block，删除padding，然后添加margin: auto。

Answer 2

你也可以尝试

#output{
  width:450px;
  max-width: 100%; 
  position: relative; 
  left: 50%; 
  -webkit-transform: translate(-50%, 0%); 
  transform: translate(-50%, 0%);
}

如何使用bootstrap 3.0在中心维护图像

2 个答案: