Wie zentriere ich das Bild innerhalb des Rasterbereichs?

Ich benutze das Bootstrap-Grid-System und zeige ein Bild in jeder Spalte an, aber es ist mir nicht gelungen, das Bild vertikal & horizontal zu zentrieren. Hier ist mein Code:Wie zentriere ich das Bild innerhalb des Rasterbereichs?

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" 
 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
 
      crossorigin="anonymous"> 
 
    <style> 
 
     .center_image { 
 
     margin: auto; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     } 
 
     .vcenter { 
 
     display: inline-block; 
 
     vertical-align: middle; 
 
     float: none; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <!-- images section --> 
 
    <div class="container"> 
 
     <div class="row" style="display: flex; padding: 20px 0px 0px 0px;"> 
 
     <!-- image col1 --> 
 
     <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter"> 
 
      <img style="width: 100%;" 
 
       class="img-responsive center_image img-thumbnail" alt="" 
 
       src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701"> 
 
     </div> 
 
     <!--image col2 --> 
 
     <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter"> 
 
      <img class="img-responsive center_image img-thumbnail" 
 
       style="width: 100%;" alt="" 
 
       src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Wenn margin:auto;, bedeuten, dass ist es von allen Seiten gleich sein sollte. Recht? aber warum das Bild nicht horizontal zentriert?

Quelle

2016-05-07 david

mit Flexbox gelöst, am wenigsten CSS verwendet. –

Sie flex Kästchen, um diese wie zu erreichen, verwenden können:

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" 
 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
 
      crossorigin="anonymous"> 
 
    <style> 
 
     .center_image { 
 
     margin: auto; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     } 
 
     .vcenter { 
 
     display: flex; 
 
     justify-content: center; 
 
     align-items: center; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <!-- images section --> 
 
    <div class="container"> 
 
     <div class="row" style="display: flex; padding: 20px 0px 0px 0px;"> 
 
     <!-- image col1 --> 
 
     <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter"> 
 
      <img style="width: 100%;" 
 
       class="img-responsive center_image img-thumbnail" alt="" 
 
       src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701"> 
 
     </div> 
 
     <!--image col2 --> 
 
     <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter"> 
 
      <img class="img-responsive center_image img-thumbnail" 
 
       style="width: 100%;" alt="" 
 
       src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2016-05-07 08:16:20

Um etwas über margin: 0 auto;

der Bildmitte oder div eine definierte Breite haben muss.

Zum Beispiel in Ihrem CSS, versuchen Sie dies:

.center_image { 
    width: 100px; 
    height: 100px; 
    margin: 0 auto; 
}

Quelle

2016-05-07 08:08:39

danke für Ihre Antwort, aber auf diese Weise wird es nicht reagieren – david

@david Entschuldigung, dass –

es ist OK, Alter. Danke für Ihre Zeit – david

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <head> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" 
 
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
 
      integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
 
      crossorigin="anonymous"> 
 
    <style> 
 
    .vcenter { 
 
\t display: -ms-flexbox; 
 
\t display: -webkit-flex; 
 
\t display: flex; 
 

 
\t -ms-flex-align: center; 
 
\t -webkit-align-items: center; 
 
\t -webkit-box-align: center; 
 
\t align-items: center; 
 
     } 
 

 

 
    </style> 
 
    </head> 
 
    <body> 
 

 
    <!-- images section --> 
 
    <div class="container"> 
 
     <div class="row" style="display: flex; padding: 20px 0px 0px 0px;"> 
 
     <!-- image col1 --> 
 
     <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter"> 
 
      <img style="width: 100%;" 
 
       class="img-responsive center_image img-thumbnail" alt="" 
 
       src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701"> 
 
     </div> 
 
     <!--image col2 --> 
 
     <div style="background-color: red;" class="col-xs-6 col-sm-6 vcenter"> 
 
      <img class="img-responsive center_image img-thumbnail" 
 
       style="width: 100%;" alt="" 
 
       src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2016-05-07 08:40:58

Vielen Dank für Ihre Antwort – david

Sie können auch einfache HTML-Center-Tag verwenden:

<div class='row'> 
    <div class='col'> 
    <center> 
     <img src='path' /> 
    </center> 
    </div> 
</div>

Quelle

2016-05-09 01:04:39

Wie zentriere ich das Bild innerhalb des Rasterbereichs?

Antwort

Verwandte Themen