イメージをコンテナ（ブートストラップ）の中心に合わせるにはどうすればいいですか？

Question

私はウェブサイトのチームセクションを作っています。 4つの列（4人のチームメンバー）があり、列の下に短いテキストがあります。次に、チームメンバーの写真をクリックすると、モーダルが開き、追加の説明が表示されます。

これまでのところすべてうまくいきましたが、チームメンバーの画像は中央に配置されていません。何らかの理由で、テキストセンターやセンターブロックのクラスを使って配置することはできません（私はブートストラップ3を使用しています）。そして、これは本当に重要です。なぜなら、ウェブサイトは反応性があるので、写真上の人物が（下のスクリーンショットのような）いくつかの解像度で「半分」しか見えない場合、見た目が良くないからです。すべて読み、私を助けるため

ありがとう！ここで

は、私がこれまでに（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 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%); 
}