複数の画像をブートストラップの中央に置く

私は複数の画像でグリッドレイアウトを作成しようとしています。私は画像間の余白の間隔を同じに保ち、ページ全体の中央にページ全体が中央に収まるようにしようとしています。複数の画像をブートストラップの中央に置く

イメージを別々にするために、20ピクセルの余白を入れました。私はcol-xx-xxを置いて物事を中央に保つようにしましたが、内容は左にシフトする傾向があります。

#fund { 
 
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBIwOgafnZrnDssRi0czWu7VKvSLVjbwi2VYsIF3u0QBgGZbFSOw'); 
 
    height: 200px; 
 
    width: 200px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
    text-align: center; 
 
    margin:20px; 
 
} 
 

 
#fund h3{ 
 
    padding-bottom:80px; 
 
} 
 

 
#fund .btn { 
 
    position: bottom; 
 
}

<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="platform"> 
 
    \t \t <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund"> 
 
    \t \t \t <h3>A Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund"> 
 
    \t \t \t <h3>B Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund"> 
 
    \t \t \t <h3>C Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm col-centered">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" id="fund"> 
 
    \t \t \t <h3>D Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12" id="fund"> 
 
    \t \t \t <h3>E Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund"> 
 
    \t \t \t <h3>F Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund"> 
 
    \t \t \t <h3>G Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" id="fund"> 
 
    \t \t \t <h3>H Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund"> 
 
    \t \t \t <h3>I Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund"> 
 
    \t \t \t <h3>J Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund"> 
 
    \t \t \t <h3>K Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t <div class="col-lg-4 col-lg-offset-4 col-md-4 col-md-offset-1 col-sm-5 col-sm-offset-2 col-xs-8 col-xs-offset-2" id="fund"> 
 
    \t \t \t <h3>L Database</h3> 
 
    \t \t \t <a href="#"></a> 
 
    \t \t \t <p><a href="#" class="btn btn-primary btn-sm">Learn More</a></p> 
 
    \t \t </div> 
 
    \t \t \t </div>  \t \t \t 
 
    \t \t </div> 
 
    \t \t </div> 
 
\t </div> 
 
</div>

出典

2017-08-22 tschonewille

各HTMLページにユニーク 'id'sがなければならないことに注意してください。（つまり、 '＃fund'） - 複数の要素（' div's）が共通のCSSプロパティを共有したい場合は、代わりに 'class'esを使用してください – ochi

変更左右の自動へmarginプロパティ（マージン：20ピクセル、オート;）

#fund { 
 
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBIwOgafnZrnDssRi0czWu7VKvSLVjbwi2VYsIF3u0QBgGZbFSOw'); 
 
    height: 200px; 
 
    width: 200px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
    text-align: center; 
 
    margin:20px auto; 
 
}

ここ

コードであります

出典

2017-08-22 10:51:24

このようなものをお探しですか？

html,body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
body{ 
 
    background-color: #eee; 
 
    font-family: arial; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.container{ 
 
    padding: 20px; 
 
} 
 
.col{ 
 
    width: 25%; 
 
    float: left; 
 
    padding: 40px; 
 
    min-width: 240px; 
 
    text-align: center; 
 
    color: #263238; 
 
    font-weight: bold; 
 
} 
 
.box{ 
 
    height: 200px; 
 
    width: 200px; 
 
    color: #fff; 
 
    margin: auto; 
 
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRBIwOgafnZrnDssRi0czWu7VKvSLVjbwi2VYsIF3u0QBgGZbFSOw'); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: cover; 
 
}

<div class="container"> 
 
    <div class="col"> 
 
    <div class="box">Image1</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="box">Image2</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="box">Image3</div> 
 
    </div> 
 
    <div class="col"> 
 
    <div class="box">Image4</div> 
 
    </div> 
 
</div>

ここでバイオリンへのリンクです：https://jsfiddle.net/aguhsdss/1/

出典

2017-08-22 12:34:07

これは近いですが、1つの列だけになると、依然としてページの中央に位置していません。 – tschonewille

複数の画像をブートストラップの中央に置く

答えて

関連する問題