Bilder in der Mitte der div im Bootstrap

alle Bilder sollten in der Mitte unabhängig von seiner Größe ausgerichtet sein. Ich habe mit unten Code versucht, aber es funktioniert nicht für mich. jede mögliche Hilfe würdeBilder in der Mitte der div im Bootstrap

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

Quelle

2016-11-08 Ganesh Putta

* Ich möchte alle Bilder zentriert sowohl vertikal als auch horizontal sein * ist eine ziemlich vage Beschreibung für das, was Sie eigentlich wollen * * erreichen. Was hast du bisher versucht? Hast du ein Beispiel was du willst? – Roberrrt

CSS können Sie Flexbox geschätzt. Fügen Sie einfach Flex Eigenschaften .border-class

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

das Snippet Siehe unten:

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

hoffe, das hilft!

Quelle

2016-11-08 10:14:51

Verwenden Sie die cover Eigenschaft background-size:

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

Quelle

2016-11-08 10:15:15

Bilder in der Mitte der div im Bootstrap

Antwort

Verwandte Themen