bootstrap thumbnail images ignorieren zentrieren css

Question

Ich kann meine bootstrap thumbnail images nicht zentrieren, egal was ich auf Tablet-Größe und kleiner versuche. Sobald Thumbnails diese Größe erreichen, scrollen sie nicht mehr, um in der Mitte des Bildschirms zu bleiben. Ich habe versucht, alles, was ich denken kann von Center-Block zu meiner Miniatur-Klasse und meine IMG responsive Klasse HTML zu Text-Algin-Center und Rand Auto 0 hinzufügen. Nichts ändert sich.

Hier ist mein html

<div class="portfolio"> 
    <div class="container"> 
    <a name="porty"></a> 
     <h1 class="text-center" id = "port">My Work</h1> 
     <div class="row"> 


     <div class="col-md-4"> 
      <div class="thumbnail "> 
      <div class="caption"> 
       <h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <a href="http://codepen.io/kgoode517/full/WwjNqp/"><i class="fa fa-codepen fa-5x fa-fw" id="first"></i> </a> 
      </div> 
      <img src="http://goodedevelopment.com/images/Bernie.PNG" class="img-responsive center-block" alt="tribute"> 
      </div> 
      <legend>Tribute page</legend> 
     </div> 

     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <div class="caption"> 
       <h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4> 
       <a href="http://codepen.io/kgoode517/full/yYddbb/"><i class="fa fa-codepen fa-5x fa-fw" id ="second"></i> </a> 
      </div> 
      <img src="http://goodedevelopment.com/images/google.png" class="img-resposive center-block" alt="google"> 
      </div> 
      <legend>Google homepage</legend> 
     </div> 

     <div class="col-md-4"> 
      <div class="thumbnail"> 
      <div class="caption"> 
       <h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4> 
       <a href="http://codepen.io/kgoode517/full/LNdxKE/"><i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i> </a> 
      </div> 
      <img src="http://goodedevelopment.com/images/cannon.png" class="img-responsive center-block" alt="cannon"> 
      </div> 
      <legend>Cannon game</legend> 
     </div> 
     </div> 

Hier ist meine CSS

/*Portfolio*/ 

.portfolio { 
background-color:#706C61; 
    padding-top: 50px; 
    padding-bottom: 100px; 
    display: inline-block; 
    width: 100%; 
    height: 800px; 
position:relative; 
} 

.portfolio h1 { 
    font-size: 65px; 
    font-family: "Roboto",serif !important; 
    color: #0d0d0d !important; 
} 

.row { 
    padding-top: 100px; 
} 

.thumbnail { 
    height: 250px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    overflow: hidden; 
    border: 1px solid black !important; 
    border-radius: 5px !important; 
} 

.caption img { 
    flex-shrink: 0; 
    max-width 100%; 
    max-height: 100%; 
} 

.caption { 
    position: absolute; 
    top: 0; 
    right: 0; 
    background: rgba(128, 128, 128, 0.75); 
    width: 100%; 
    height: 100%; 
    padding: 2%; 
    display: none; 
    text-align: center; 
    color: #fff !important; 
    z-index: 2; 
    font-family: "Montserrat",serif !important; 
} 

.caption a { 
    text-decoration: none; 
    color: white; 
} 

.caption h4 { 
    position: relative; 
    left: 5px; 
    bottom: 10px; 
    font-size: 25px; 
} 

.caption i:hover { 
    color: orange !important; 
} 

legend { 
    font-family: "Roboto",serif !important; 
    border-bottom: none !important; 
    color: #0d0d0d !important; 
    font-size:22px; !important; 
    height:200px; 
} 

#first { 
    position: relative !important; 
    bottom: -35px !important; 
} 

#second { 
    position: relative !important; 
    bottom: -35px !important; 
} 

#icon { 
    position: relative; 
    top: 30px; 
} 



@media screen and (min-width:767px) and (max-width:1199px) { 
    #first { 
    position: relative; 
    bottom: 20px; 
    } 
    #icon { 
    top: 50px !important; 
    } 
    .caption h4 { 
    font-size: 20px; 
    } 
} 

@media screen and (min-width:767px) and (max-width:991px) { 
    #first { 
    position: relative; 
    top: 50px; 
    } 
    .caption h4 { 
    font-size: 30px; 
    } 
    .caption { 
    font-size: 15px; 
    } 
    .caption i { 
    position: relative; 
    top: 50px; 
    } 
    #icon { 
    position: relative; 
    top: 65px !important; 
    } 
    .caption .fa { 
    font-size: 50px; 
    } 
} 




@media screen and (max-width: 1200px) { 
    .portfolio h1 { 
    font-size: 55px; 
    } 
} 


@media screen and (max-width: 991px){ 
    .thumbnail { 
    height: 369px; 
    width: 440px; 
    position: relative; 
    right: -142px; 
    bottom: 48px; 
} 

.portfolio{ 
height: 2650px; 
} 

#profile li { 
    position: relative; 
    left: 60px; 
} 
.caption h4 { 
    font-size: px !important; 
} 
.caption .fa { 
    font-size: 80px !important; 

} 

legend { 
    height: 80px; 
    position: relative; 
    left: 139px; 
    bottom: 53px; 
} 
} 

@media screen and (max-width: 965px) { 
    .portfolio { 
    margin-top: -150px !important; 
    } 
} 

@media screen and (max-width:767px) { 
    #first { 
    position: relative; 
    top: 25px; 
    } 
    .caption h4 { 
    font-size: 30px; 
    } 
    .caption { 
    font-size: 15px; 
    } 
#port{ 
    width: 50%; 
    height: 50%; 
    overflow: auto; 
    margin: auto; 
    position: absolute; 
    top: -1285px; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

.thumbnail { 
    position: relative; 
    bottom: 0px; 
} 
legend 
{ 
    position: relative; 
    bottom: 13px; 
} 
} 

@media screen and (max-width: 454px){ 
    .caption h4{ 
    font-size:25px; 
    } 
    #first{ 
    top:15px; 
    } 
    #second{ 
    top:15px; 
    } 
} 



@media screen and (max-width:400px) { 
    #icon { 
    position: relative; 
    bottom: 20px; 
    } 
} 

@media screen and (max-width:397px) { 
    #icon { 
    position: relative; 
    top: 0px; 
    } 
} 
@media screen and (max-width:390px) { 
    #first{ 
    top:5px; 
    } 
    } 
@media screen and (max-width:325px) { 
    .caption .fa { 
    font-size:60px; 
    } 
    } 
@media screen and (max-width:307px) { 
    #first{ 
    top:-5px; 
    } 
    } 

/*End Portfolio*/ 

Here is the website

Und schließlich ist hier ein Screenshot von dem, was ich Hilfe erlebe stark dank würde geschätzt!

Answer 1

Anstatt nur class = "col-md-4" zu verwenden, sollten Sie "Anweisungen" für Bootstrap bei verschiedenen Bildschirmgrößen angeben. Die Verwendung mehrerer Klassen wie class = "col-xs-12 col-sm-6 col-md-4" würde die Anzahl der Spalten bei den verschiedenen Bildschirmgrößen anpassen, so dass der Inhalt jeder Spalte leicht zentriert werden kann und einfach die "img-responsive" -Klasse auf die Bilder, so dass sie immer in die Spalte passen, in der sie sich befinden. Wenn dann die Bildschirmgröße kleiner ist, werden weniger Spalten angezeigt, aber der Inhalt der Spalte bleibt gleich und bleibt in der Spalte zentriert. Wenn Sie die Spalte auf dem Bildschirm zentrieren möchten, ohne die Breite des Bildschirms zu füllen (wie col-xs-10 verwenden, so dass sie nicht die Breite von 12 Spalten füllt), verwenden Sie die Klasse col-x-offset-x zu Erstellen Sie eine "leere" Spalte links neben dem Ort, an dem Ihr div angezeigt wird. Sie können Kombinationen von Bildschirmgrößen und Offsets nach Bedarf verwenden. Das Raster macht es sehr einfach, die gewünschte Ausrichtung in verschiedenen Größen zu erhalten, ohne dass Sie CSS verwenden müssen, um exakte Pixel für Ränder und dergleichen zu definieren. Sobald Sie beginnen, das CSS mit "anderen Anweisungen" zu überschreiben, so weit wie Höhe/Breite gehen, können Dinge doof werden ...

Answer 2

Ihre Fest navbar sind mit einer Breite größer als niedrigere Auflösungen, eine Menge von leeren Raum auf der rechten Seite Theres, wenn Sie die Auflösung fallen. Ich empfehle, dass Sie mit der Entwicklung Ihrer Website beginnen, indem Sie diese grundlegende Bootstrap-Vorlage verwenden.

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="description" content="" /> 
    <meta name="author" content="" /> 
    <title>Bare - Start Bootstrap Template</title> 
    <!-- Custom CSS --> 
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
    <style> 
    body { 
     padding-top: 70px; 
     /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */ 
    } 
    </style> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 

    <body> 
    <!-- Navigation --> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Start Bootstrap</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li> 
       <a href="#">About</a> 
      </li> 
      <li> 
       <a href="#">Services</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 
    <!-- Page Content --> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-lg-12 text-center"> 
      <h1>A Bootstrap Starter Template</h1> 
      <p class="lead">Complete with pre-defined file paths that you won't have to change!!</p> 
      <ul class="list-unstyled"> 
      <li>Bootstrap v3.3.7</li> 
      <li>jQuery v1.11.1</li> 
      </ul> 
     </div> 
     </div> 
     <!-- /.row --> 
    </div> 
    <!-- /.container --> 
    </body> 

</html> 

Ihre Website innerhalb des .container Rebase und Stil verbinden und halten zu gehen .. Ich hoffe, dass es Ihnen besser die Konzepte der Bootstrap verstehen hilft, kann ich nicht für Sie, nachdem alle die ganze Arbeit tun, sind Sie ein Full-Stack Entwickler.