All geek questions in one place

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

I am creating a section for a group for a website. It should have 4 columns (for 4 team members), and there will be short text below the columns. Then, when I click on the photo of the team member, the modal will open and give an additional description.

Everything works fine so far, but the images of the team members are not located in the center. For some reason, I cannot arrange them using text center or center classes (I use Bootstrap 3). And this is really important, because the website is responsive, so it doesn’t look good if the person in the photo is only “half” displayed in some resolutions (for example, in the screenshot below).

enter image description here

Thanks to everyone for reading and help!

Here is what I have so far (HTML and 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;
}
+4
1

, , . ( ).

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

Source: https://habr.com/ru/post/1655194/

More articles:


All Articles