ブートストラップのdivの中央に画像を貼り付けます。

すべての画像は、サイズに関係なく中央揃えにする必要があります。私は以下のコードで試してみましたが、私にとってはうまくいきません。任意のヘルプは、あなたがCSSフレキシボックスを使用することができますブートストラップのdivの中央に画像を貼り付けます。

.border-class{ 
 
    border:1px solid #ddd; 
 
    padding:5px; 
 
    min-height:160px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_27_one_finger_click-128.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/images/colorpicker.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
</div>

出典

2016-11-08 Ganesh Putta

私はすべての画像が整列センターになりたい*垂直方向と水平方向の両方*あなたが*実際に*を達成したいのかについて、かなり曖昧な説明です。これまでに何を試しましたか？あなたが望むものがありますか？ – Roberrrt

をいただければ幸いです。

.border-class{ 
 
    /* Add these 'flex' properties */ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border:1px solid #ddd; 
 
    padding:5px; 
 
    min-height:160px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/hawcons-gesture-stroke/32/icon_27_one_finger_click-128.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
<div class="col-xs-3"> 
 
    <div class="border-class"> 
 
    <img src="http://www.w3schools.com/images/colorpicker.png" class="img-responsive" alt="Cinque Terre"/> 
 
    </div> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

・ホープ、このことができます：ちょうど下のスニペットを参照してください.border-class

.border-class { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

にFlexのプロパティを追加！

出典

2016-11-08 10:14:51

利用background-sizeのcoverプロパティ：

background-image : ... 
background-size : cover; 
background-position : center;

出典

2016-11-08 10:15:15

ブートストラップのdivの中央に画像を貼り付けます。

答えて

関連する問題