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 标签以列为中心。但是，图像仍处于绑定状态。这是完整的代码部分：

      <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

您需要将 link 居中。

因为它有一个定义的宽度，你可以用 margin:auto 来做到这一点。

.urlImg1 {
  width: 200px;
  height: 200px;
  display: block;
  background-image: url('http://s28.postimg.org/3jrpa5hvx/BUTTON1_A.jpg');
  background-repeat: no-repeat;
  margin: auto;
}
.urlImg1:hover {
  background-image: url('http://s13.postimg.org/brbfy86xz/BUTTON1_B.jpg');
}

<div class="col-md-4">
  <h2 style="text-align: center;">Version 1.0</h2>
  <a href="http://www.corelangs.com" class="urlImg1" title="Corelangs link"></a>
</div>

Answer 2

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

例子

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。

CSS 图片居中

CSS Centering of Image

css

asp.net-mvc

image

center

centering