イメージのタグの中心を作る

Question

私はブートストラップ3を使用しています。イメージの上にアイコン付きのリンクを追加し、それを垂直に中央に配置したいと考えています。

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> 
<div class="col-post"> 
    <div class="post-img"> <a href="#" class="my-icon"></a> <a href="mylink"> 
    <div class="overlay"> <img src="myimage.jpg" alt="#" class="img-responsive"> </div> 
    </a> 
    </div> 
    <!--post-img--> 
    <div class="post-icons"></div> 
</div> 
</div> 

私はクラスmy-iconとのリンクを画像の中央にしたいと考えています。私のアイコンは絶対配置され、post-imgは相対配置されます。

ご協力いただければ幸いです。

Answer 1

ここでは、画像を垂直方向に中央に配置するのに役立つコードがいくつかあります。通常、水平方向のセンタリングよりもはるかにトリッキーです。

#ID { 
    Margin:0 auto; 
    Position:absolute; 
    Left:0; 
    Right:0; 
    Top:50%; 
    Transform: translate(0, -50%); 
    Display:block; 
} 

Answer 2

私はちょうど、各divの内容を中心に、既存の.center-blockヘルパライブラリからクラスだけでなく、.text-centerクラスを使用していました。 （see documentation for bootstrap 3.x）

私はこれがあなたの望むものではないと確信していますが、結果に近づくのに役立ちます。

調整が必要な場合は教えてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<div class="row"> 
    <div class="col-xs-12"> 
    <h2>My approach (simplistic)</h2> 
    <a href="#" class="my-icon"> 
     <img src="http://lorempixel.com/300/300" class="center-block img-responsive img-circle" alt="Responsive image" /> 
    </a> 
    </div> 
</div> 
<hr/> 
<div class="row"> 
    <div class="col-xs-12"> 
    <h2>Your approach (w/ added elements)</h2> 
    <div class="col-post"> 
     <div class="post-img center-block text-center"> 
     <a href="#" class="my-icon">my-icon</a> 
     <a href="mylink"> 
      <div class="overlay"> 
      <img src="http://lorempixel.com/300/300?asdf" alt="#" class="img-responsive center-block"> 
      </div> 
     </a> 
     </div> 
     <!--post-img--> 
     <div class="post-icons center-block text-center">post icons</div> 
    </div> 
    </div> 
</div> 

Answer 3

Try Flexbox、それは私が今まで縦に成功一貫して中央揃えアイテムを持っていたいくつかの方法の一つです。親コンテナの

：表示

表示 これはフレックスコンテナを定義します。指定された値に応じてインラインまたはブロック>すべての直接の子要素に対してフレックスコンテキストを有効にします。子供のために

CSS.container { display: flex; /* or inline-flex */ } 

： ALIGN-項目

ALIGN-アイテム これは、現在の行にクロス軸に沿って をどのように配置されるか、フレックス項目のデフォルトの動作を定義します。交差軸（ 主軸に垂直）の場合は の正当化コンテンツバージョンと考えることができます。

CSS.container { align-items: flex-start | flex-end | center | baseline | stretch;}