Position feste Seitenleiste und Zentrierung Inhalt

Question

Ich bin total verloren mit CSS, kann mir jemand helfen, mit der Zentrierung und reaktionsschnellen Bilder im Content-Bereich ohne hacken css? Diese feste Seitenleiste macht es schwierig, weil ich die Funktionen "justify-content" und "align-items" nicht verwenden kann, weil sie unter der Sidebar versteckt ist.

Dank

<div class="container"> 
     <div class="sidebar"> 
     <ul> 
     <li> 
      <span>Home</span> 
     </li> 
     <li> 
      <span>Home</span> 
     </li> 
     </ul> 
     </div> 
     <div class="content"> 
     <img src="http://placehold.it/350x150" /> 
     <img src="http://placehold.it/350x150" /> 
     <img src="http://placehold.it/350x150" /> 
     </div> 
    </div> 

    .container { 
     padding-left:200px 
    } 

    .sidebar { 
     position:fixed; 
     height:100%; 
     width:200px; 
     top:0; 
     left:0; 
     background:#fff; 
     border-right:2px solid; 
    } 

JSFIDDLE

Answer 1

Wenn Sie versuchen, nur die Bilder zentriert zu machen, können Sie einfach die Regel hinzufügen

.content { 
    text-align: center; 
} 

Answer 2

Sie Flexbox verwenden können. Sie können Ihre Sidebar weiterhin verwenden, ohne position: fixed; zu verwenden, indem Sie flex: 0 0 200px; gehen und um die Höhen unterschiedlich zu halten, fügen Sie einen align-items: flex-start; dem Container hinzu. Besser noch setzen align-self: flex-start; auf die .container um genauer zu sein.

Schauen Sie sich voll Beispiel:

.container { 
 
    display: flex; 
 
} 
 

 
.sidebar { 
 
    flex: 0 0 200px; 
 
    height:100vh; 
 
    width:200px; 
 
    background:#fff; 
 
    border-right:2px solid; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-self: flex-start; 
 
}

<div class="container"> 
 
    <div class="sidebar"> 
 
    <ul> 
 
     <li><span>Home</span></li> 
 
     <li><span>Home</span></li> 
 
    </ul> 
 
    </div> 
 
    <div class="content"> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <img src="http://placehold.it/350x150" /> 
 
    <img src="http://placehold.it/350x150" /> 
 
    </div> 
 
</div>