CODEWITHSUNDEEP
cssasp.net-mvcimagecentercentering
KimCheeFatChoyProgrammer
KimCheeFatChoyProgrammer

Reputation: 183

CSS Centering of Image

I'm working in visual studio with the following code, however, the URL images refuse to center in the columns like the h2 tags did. ive tried multiple options such as

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

also

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

here is what it currently looks like. As you can see, my h2 tags are centered with the columns. however, the images are still left bound. would like to center both pills to center of their columns here is the full section of code:

      <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>

Upvotes: 0

Views: 4411

Answers (2)

Viktor Fr&#246;berg
Viktor Fr&#246;berg

Reputation: 112

It's because you're trying to center the image while the element is as wide as the image. In other words, the image is centered it's just that the element is as wide as the image which makes it appear not centered.

Examples

http://jsfiddle.net/ey0upzw1/

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

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

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

Solutions

Settings the image to margin: auto.

Adding text-align: center to col-4 instead of only on the h2, you also have to set the image to inline-block instead of block.

Upvotes: 2

Paulie_D
Paulie_D

Reputation: 115045

You need to center the link.

Since it has a defined width, you can do that with 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>

Upvotes: 0

Related Questions