将按钮背景图像置于容器内

Question

我已经成功地将按钮图像正确放置到位，但现在定位已全部关闭。

我想让它居中，如图所示：

到目前为止我在这里：http://codepen.io/anon/pen/snjCu。

我正在尝试将图像放置在其列的中心内，以便在屏幕较大时将图像正确放置。

感谢任何帮助。

<footer>
        <div class="banner">
        <div class="container-fluid">
            <div id="footer-controls" class="text-center">
            <div class="col-xs-4"><i class="fa fa-picture-o"></i>
                <span>GALLERY</span>
                </div>
                 <div class="col-xs-4">
                <a href="#" class="orange-button"></a>
                </div>
             <div class="col-xs-4"><i class="fa fa-file-text-o"></i>
                <span>LEGAL</span>
                </div>
            </div>
        </div>
        </div>
    </footer>

footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;;
top: -50px
}

Answer 1

您可以使用CSS变换调整图像的位置

Codepen Demo

footer #footer-controls .orange-button {
  background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
  width: 215px;
  height: 210px;
  background-size: 100%;
  position: absolute;
  top: -50px;
  left:50%; /* push the image half-way over */
  transform:translateX(-50%); /* bring it back half its own width */
  /* or margin-left: -50% of image width */ 
}

Answer 2

虽然不可取，但我发现提供列和橙色按钮固定width样式将解决此问题。

.orange-button {
background-image: url('http://i.imgur.com/lmB72tf.png');
background-repeat: no-repeat;
background-size: 215px 210px;
display:inline-block;
width: 215px;
height: 210px;

Answer 3

通常您可以使用以下方式居中背景图像：
背景位置：中心位置;
这实际上是默认值。

但是，带有图像的容器不居中。
你可能想考虑重新定位容器并尝试除了position之外的其他东西：绝对;