C. Felipe C. Felipe - 2 months ago 6
CSS Question

How to center image in the very center of container (Bootstrap)?

I am making a team section for a website. It is supposed to have 4 columns (for 4 team members) and below the columns there will be a short text. Then when I click on a photo of the team member a modal will open and give additional description.

Everything works fine so far, but the images of team members are not positioned in the center. For some reason I cannot position them using text-center or center-block classes (I am using Bootstrap 3). And this is really important because website is responsive so it doesn't look good if the person on the photo is only 'half' visible in some resolutions (like on a screenshot below).

enter image description here

Thanks all for reading and helping me!

Here is what I have so far (HTML & CSS):

<div id="team" class="container">

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h2 class="specialheadingtextportfolio">T</h2>
<div class="specialheadingportfolio"><span class="lightblue">&lt/</span>Team<span class="lightblue">&gt</span></div>
</div>
</div>

<div class="col-md-12">

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="columns portfolio-item">
<div class="item-wrap">
<a href="#modal-01" title="">
<img alt="" src="img/asianwoman.jpg">
<div class="overlay">
<div class="portfolio-item-meta">
<h5>Jane Doe</h5>
<p>Web Designer</p>
</div>
</div>
<div class="link-icon"><i class="fa fa-plus"></i></div>
</a>
</div>
</div>
<div class="teamtext">
<h3 class="teamtextheading">Jane Doe</h3>
<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="columns portfolio-item">
<div class="item-wrap">
<a href="#modal-02" title="">
<img alt="" src="img/m2.jpg">
<div class="overlay">
<div class="portfolio-item-meta">
<h5>Jane Doe</h5>
<p>Web Designer</p>
</div>
</div>
<div class="link-icon"><i class="fa fa-plus"></i></div>
</a>
</div>
</div>
<div class="teamtext">
<h3 class="teamtextheading">Jane Doe</h3>
<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="columns portfolio-item">
<div class="item-wrap">
<a href="#modal-03" title="">
<img alt="" src="img/girl.jpg">
<div class="overlay">
<div class="portfolio-item-meta">
<h5>Jane Doe</h5>
<p>Web Designer</p>
</div>
</div>
<div class="link-icon"><i class="fa fa-plus"></i></div>
</a>
</div>
</div>
<div class="teamtext">
<h3 class="teamtextheading">Jane Doe</h3>
<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="columns portfolio-item">
<div class="item-wrap">
<a href="#modal-04" title="">
<img alt="" src="img/beach.jpg">
<div class="overlay">
<div class="portfolio-item-meta">
<h5>Jane Doe</h5>
<p>Web Designer</p>
</div>
</div>
<div class="link-icon"><i class="fa fa-plus"></i></div>
</a>
</div>
</div>
<div class="teamtext">
<h3 class="teamtextheading">Jane Doe</h3>
<p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p>
</div>
</div>

</div>




#portfolio-wrapper .columns {
margin-bottom: 36px;
}
.portfolio-item .item-wrap {
height: 450px;
width: auto;
overflow: hidden;
position: relative;

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.portfolio-item .item-wrap a {
display: block;
cursor: pointer;
}

/* overlay */
.portfolio-item .item-wrap .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);

-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;

background: rgba(28, 147, 216, 0.9);
}
.portfolio-item .item-wrap .link-icon {
display: block;
color: #fff;
height: 30px;
width: 30px;
font-size: 24px;
line-height: 30px;
text-align: center;

opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);

-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;

position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -15px;
}
.portfolio-item .item-wrap img {
vertical-align: bottom;
}
.portfolio-item .portfolio-item-meta { padding: 0px }
.portfolio-item .portfolio-item-meta h5 {
font-size: 22px;
font-family: 'Lato', sans-serif;
font-weight: bold;
padding-top: 40%;
color: #fff;
}
@media only screen and (min-width:1600px){
.portfolio-item .portfolio-item-meta h5 {
padding-top: 30%;
}
}
.portfolio-item .portfolio-item-meta p {
font-size: 16px;
font-family: 'Lato', sans-serif;
color: #eaf2e3;
margin-bottom: 0;
}

/* on hover */
.portfolio-item:hover .overlay {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}
.portfolio-item:hover .link-icon {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}

.teamtext{
background: #464747;
color: #fff;
padding: 30px 15px;
margin-bottom: 70px;
display: block;
}
.teamtextheading{
padding-top: 0px;
margin-top: 0px;
}

Answer

I think you can making relative the image and giving some positions to center the image. The result will be always shown the center of the image and crop the both sides (right and left) if necessary.

.portfolio-item .item-wrap img {
   position: relative;
   left: 50%;
   -ms-transform: translateX(-50%); /** old IE **/
   -webkit-transform: translateX(-50%); /** iOS safari ***/
   transform: translateX(-50%);
}