Wie zentriere ich den Inhalt eines Divs mit Inhaltselementen, die nach links verschoben sind?

Question

Ich versuche, eine einfache Bildergalerie zu erstellen, wo die Galerie Elemente in einem div platziert werden. Da die Elemente jedoch nach links verschoben sind, zentrieren sie sich nicht zentrisch, wenn ich hinzufüge text-align: center; an die Eltern div. (Ich bin mit Bootstrap 3 und Eltern div ist Panel-Körper Die Inhalte liegen in Panel-Körper..)

CSS:

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<style type="text/css" media="screen"> 
    .image-box { 
     float: left; 
    } 

    .image-box img { 
     width: 128px; 
     height: 128px; 
    } 
</style> 

HTML:

<div class="panel panel-default"> 
    <div class="panel-heading text-center"> 
     <h3 class="panel-title">GALLERY</h3> 
    </div> 
    <div class="panel-body"> 
     <div class="image-box"> 
      <img src="member-icon.png"> 
      <P class="caption">Image Description</P> 
     </div> 
     <div class="image-box"> 
      <img src="member-icon.png"> 
      <P class="caption">Image Description</P> 
     </div> 
     <div class="image-box"> 
      <img src="member-icon.png"> 
      <P class="caption">Image Description</P> 
     </div> 
    </div> 
</div> 

Answer 1

text-align: Zentrum; funktioniert nicht, wenn Floating verwendet wird. Inline-Block verwenden.

Bitte siehe Code unten

.panel-body { 
 
    text-align: center; 
 
} 
 
.image-box { 
 
    display: inline-block; 
 
    margin-left: -4px; 
 
} 
 
.image-box img { 
 
    width: 128px; 
 
    height: 128px; 
 
}

<div class="panel panel-default"> 
 
    <div class="panel-heading text-center"> 
 
     <h3 class="panel-title">GALLERY</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="image-box"> 
 
      <img src="http://placehold.it/300x300"> 
 
      <P class="caption">Image Description</P> 
 
     </div> 
 
     <div class="image-box"> 
 
      <img src="http://placehold.it/300x300"> 
 
      <P class="caption">Image Description</P> 
 
     </div> 
 
     <div class="image-box"> 
 
      <img src="http://placehold.it/300x300"> 
 
      <P class="caption">Image Description</P> 
 
     </div> 
 
    </div> 
 
</div>

Here is a live demo

sorry für schlechtes Englisch

Answer 2

HTML-Datei:

<div class="panel panel-default"> 
    <div class="panel-heading text-center"> 
    <h3 class="panel-title">GALLERY</h3> 
    </div> 
    <div class="panel-body"> 
    <div class="col-md-offset-4 col-xs-offset-3"> 
    <div class="image-box"> 
     <img src="member-icon.png"> 
     <p class="caption">Image Description</p> 
    </div> 
    <div class="image-box"> 
     <img src="member-icon.png"> 
     <p class="caption">Image Description</p> 
    </div> 
    <div class="image-box"> 
     <img src="member-icon.png"> 
     <p class="caption">Image Description</p> 
    </div> 
    </div> 
</div> 
</div> 

Datei

CSS:

.image-box { 
    float: left; 
    } 

.image-box img { 
    width: 128px; 
    height: 128px; 
    padding:15px; 
    } 

Siehe Demo: Div content center in panel body