Igor de Abreu
Igor de Abreu

Reputation: 13

How to center an image related to bootstrap and css

I am trying to center an image but after some attempts I could not make it work properly. Apparently the changes I am doing are not taking effect. The image code is the below

<div class="col-md-4 col-sm-3 team-grid team-grid1 animated wow slideInUp" data-wow-delay=".5s">
    <img src="images/shane-de-abreu-arquetipo-shane.jpg" alt="Shane de Abreu" class="img-responsive" />
    <div class="p-mask">
        <h4>Shane de Abreu</h4>
        <ul>
            <li><a class="podbean" href="http://arquetiposhane.podbean.com"></a></li>
            <li><a class="facebook" href="https://www.facebook.com/arquetiposhane"></a></li>
            <li><a class="youtube" href="https://www.youtube.com/channel/UCj6b5dpMH0RXAEpJV6fN-bQ"></a></li>
        </ul>
    </div>
</div>

Since I am newbie I don't know which file should I apply changes and after inspecting the element I realized that it was related to CSS (style.css) and Bootstrap (bootstrap.css). So I tried adding W3S recommended code to those files, the one I let below.

img {
    display: block;
    margin: auto;
}

The problem is that I did not know where exactly I had to place it, so I made some attempts, but I got no success. I tried changing the team-grid settings below

}
.team-grid{
    position:relative;
    overflow: hidden;
}

Also, tried by changing the team-grid1 settings

.team-grid1,.team-grid2{
    margin-bottom:20px;
}

Also tried changing the img settings (style.css file)

img {
    width: 100%;
}

And tried changing the img settings (bootstrap.css file)

img {
  vertical-align: middle;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;

}

I don't know if I should place the W3S recommended code (bootstrap or style) cause apparently one is ruling over the other, but I don't know which is. Can Someone help me to center this image? It is located at www.arquetiposhane.tk site.

Many thanks!

Upvotes: 0

Views: 52

Answers (1)

Rahul
Rahul

Reputation: 4364

use below code this will make your image center

.team-grid{
  margin: 0 auto;
  float: none;
}

enter image description here

Upvotes: 1

Related Questions