Wie Blöcke vertikal ausgerichtet werden

Ich habe Schwierigkeiten, meine Blöcke vertikal zu zentrieren. Wenn Sie einen Blick auf meinen Code werfen, wird der Block test1 mit dem Block catA catB catE catF ausgerichtet, aber test2 block ist nicht mit seinen jeweiligen oberen Blöcken.Wie Blöcke vertikal ausgerichtet werden

html:

<div class="homepage-wrapper"> 
    <div class="homepage-top-category-container"> 
     <div class="homepage-top-category-container-title"> 
      <span id="homepage-top-category-container-title">Most popular aisles</span> 
     </div> 
     <div class="homepage-top-category-container-list"> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catA 
         </div> 
        </div> 
       </a> 
      </div> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catB 
         </div> 
        </div> 
       </a> 
      </div> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catC 
         </div> 
        </div> 
       </a> 
      </div> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catD 
         </div> 
        </div> 
       </a> 
      </div> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catE 
         </div> 
        </div> 
       </a> 
      </div> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catF 
         </div> 
        </div> 
       </a> 
      </div> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catG 
         </div> 
        </div> 
       </a> 
      </div> 
      <div> 
       <a href="#"> 
        <div class="homepage-top-category-container-item" id="homepage-top-category-container-item"> 
         <div class="homepage-top-category-container-item-btn"> 
          Browse catH 
         </div> 
        </div> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="homepage-banner-grid-wrapper"> 

    <div class="homepage-banner-grid"> 

     <div class="home-page-banner-grid-items" id="home-page-banner-grid-item"> 
      test1 
     </div> 

     <div class="home-page-banner-grid-items" id="home-page-banner-grid-item"> 
      test2 
     </div> 

     <!--<div class="home-page-banner-grid-items" id="home-page-banner-grid-item3">******* 
      test3 
     </div> 
    </div>****** --> 

</div>

css hier:

a { 
    text-decoration: none; 
} 
body { 
    margin: 0px; 
} 
.homepage-wrapper { 
    max-width: 1078px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.homepage-top-category-container-title { 
    color: #808080; 
    margin-top: 15px; 
    padding: 15px 0 15px 0; 
    font-weight: bold; 
    letter-spacing: -1px; 
} 
#homepage-top-category-container-title { 
    color: ##808080; 
    margin-left: 22px; 
} 
.homepage-top-category-container-list { 
    display: flex; 
    flex-wrap: wrap; 
    width: auto; 
    height: auto; 
    margin-left: auto; 
    margin-right: auto; 
} 
.homepage-top-category-container-list > div { 
    margin-left: 22px; 
    margin-bottom: 22px; 
} 
.homepage-top-category-container-item { 
    display: block; 
    float: none; 
    width: auto; 
    height: auto; 
    border: solid 1px #d0d0ce; 
    position: relative; 
    border-radius: 3px; 
} 
#homepage-top-category-container-item { 
    width: 240px; 
    height: 360px; 
} 
.homepage-top-category-container-item:hover { 
    -webkit-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1); 
    -moz-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1); 
    box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1); 
} 
.homepage-top-category-container-item-btn { 
    background-color: #cde5d9; 
    color: black; 
    position: absolute; 
    padding: 10px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    border-top: 1px solid #d0d0ce; 
    border-bottom: 2px solid #d0d0ce; 
} 
.homepage-banner-grid-wrapper { 
    background-color: yellow; 
    width: 100%; 
    height: auto; 
} 
.homepage-banner-grid { 
    max-width: 1078px; 
    height: auto; 
    display: flex; 
    align-items: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

.home-page-banner-grid-items { 
    width: 506px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

#home-page-banner-grid-item { 
    background-color: red; 
    margin-left: 22px; 
/* 
#home-page-banner-grid-item1 { 
    background-color: red; 
} 
#home-page-banner-grid-item2 { 
    background-color: green; 
} 
#home-page-banner-grid-item3 { 
    background-color: orange; 
} 
*/

Mein Ziel ist es test2 Block unter seinen jeweiligen Blöcken auszurichten, so dass es einfach aussehen wird, wie test1 Block unter seinen jeweiligen Blöcken ausgerichtet ist, .

Ich werde einige Korrekturen und/oder Erweiterungen meines Codes zu schätzen wissen. hier

jsfiddle ->https://jsfiddle.net/r0gLo9cp/

Vielen Dank für Ihre Hilfe.

Quelle

2017-02-21 Anonymous

die Frage Bearbeitung vorschlagen möglichst einfachen Fall zu zeigen. Ich fühle mich, als würde ich mich nicht damit befassen, weil so viel los ist. – Bemmu

Kleine Anmerkung - Sie sollten wirklich nicht mehr als ein Div mit der gleichen ID auf einer Seite haben, IDs sollen einzigartig sein. – JSilv

@JSilv danke für den Rat. Ich korrigiere es gerade jetzt. –

Das ist es flex-Richtung wie thesoorae behebt hinzufügen sagte

.homepage-banner-grid { 
max-width: 1078px; 
height: auto; 
display: flex; 
flex-direction:column; 
align-items: center; 
margin-left: auto; 
margin-right: auto; 
}

Quelle

2017-02-21 01:01:34 Anthony

Sieht aus wie es mein Problem gelöst hat ... Danke. –

Viel Glück mit Ihrem Code und kein Problem – Anthony

Vielen Dank für Ihre Hilfe. –

Vermissen Sie Ihr schließendes Div auf der Unterseite? Sieht so aus, als ob flex die Zentrierung für dich übernehmen sollte. Wenn du nach ihnen suchst, damit sie in einer Spalte aufgelistet werden, vergewissere dich, dass du flex-direction: column; im übergeordneten Container verwendest (homepage-banner-grid).

Quelle

2017-02-21 00:45:05 thesoorae

hum .... habe nicht gedacht, dass mir ein schließendes div fehlt, aber lass mich das mal überprüfen. Danke für das Heads-Up –

Ich habe ein schließendes Div vermisst, wie du vermutest, aber es hat das Problem nicht behoben. –

Wie Blöcke vertikal ausgerichtet werden

Antwort

Verwandte Themen