图像的CSS居中

Question

我正在使用以下代码在 visual studio 中工作，然而，URL 图像拒绝像 h2 标签那样在列中居中。我尝试了多种选择，例如

  background-image: url('http://i59.tinypic.com/314uzyb.jpg');
  background-position: center center;
  background-repeat: no-repeat;

还有

  background: url('http://i59.tinypic.com/314uzyb.jpg') center center;
  background-repeat: no-repeat;

这是它目前的样子。如您所见，我的 h2 标签以列为中心。但是，图像仍处于绑定(bind)状态。 这是完整的代码部分:

      <div class="col-md-4">
    <h2 style="text-align: center;">Version 1.0</h2>

    @*EDIT________________BUTTON1 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*@
    <style type="text/css">
        .urlImg1 {
            width: 200px;
            height: 200px;
            display: block;
            background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
            background-repeat: no-repeat;
        }

            .urlImg1:hover {
                background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
            }
    </style>
    <a href="http://www.corelangs.com" class="urlImg1" title="Corelangs link"></a>
    @*END BUTTON#1_____________________________________*@
</div>

<div class="col-md-4">
    <h2 style="text-align: center;">Version 2.0</h2>

    @*EDIT________________BUTTON2 THAT TAKES USER TO A CREATE PAGE FOR SPECIFIC SONG TYPE(KEY)*@
    <style type="text/css">
        .urlImg2 {
            width: 200px;
            height: 200px;
            display: block;
            background-image: url('http://i59.tinypic.com/314uzyb.jpg');
            background-repeat: no-repeat;
        }

            .urlImg2:hover {
                background-image: url('http://i60.tinypic.com/rmp4pv.jpg');
            }
    </style>
    <a href="http://www.corelangs.com" class="urlImg2" title="Corelangs link"></a>
    @*END BUTTON#2_____________________________________*@
</div>

Answer 1

这是因为当元素与图像一样宽时，您正试图使图像居中。换句话说，图像是居中的，只是元素与图像一样宽，这使得它看起来没有居中。

示例

http://jsfiddle.net/ey0upzw1/

width: 500px; /* Equal to col width */

http://jsfiddle.net/ey0upzw1/1/

width: 200px; /* Not equal to col width */

解决方案

将图像设置为 margin: auto。

将 text-align: center 添加到 col-4 而不是仅在 h2 上，您还必须将图像设置为 inline-block 而不是 block。