Reputation: 13
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
Reputation: 4364
use below code this will make your image center
.team-grid{
margin: 0 auto;
float: none;
}
Upvotes: 1