Mehrere Bilder im Bootstrap zentriert halten

Ich habe versucht, ein Rasterlayout mit mehreren Bildern zu haben. Ich versuche, den Randabstand zwischen Bildern gleich zu halten und die ganze Gruppe in der Mitte der Seite zentriert zu halten, während die Seite die Größe ändert.Mehrere Bilder im Bootstrap zentriert halten

Um die Bilder getrennt zu halten, habe ich einen Rand von 20 px gesetzt. Ich lege col-xx-xx an, um zu versuchen, die Dinge zentriert zu halten, aber der Inhalt neigt dazu, sich nach links zu verschieben. Hier

ist der Code:

#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>

Quelle

2017-08-22 tschonewille

Bitte beachten Sie, dass es eindeutig sein sollte 'ID's in jeder HTML-Seite. (zB '# fund') - Wenn Sie möchten, dass mehrere Elemente (' div's) eine gemeinsame CSS-Eigenschaft teilen, verwenden Sie 'class's stattdessen – ochi

Ändern Sie die Eigenschaft margin auf Auto für die linke und rechte Seite (margin: 20px auto;)

#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; 
 
}

Quelle

2017-08-22 10:51:24

Suchst du so etwas?

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>

Hier ist der Link zu der Geige: https://jsfiddle.net/aguhsdss/1/

Quelle

2017-08-22 12:34:07

Dies ist nahe, aber wenn es nur zu einer einzigen Spalte kommt, sind die Bildfelder immer noch nicht zentriert in der Mitte der Seite. – tschonewille

Mehrere Bilder im Bootstrap zentriert halten

Antwort

Verwandte Themen