Vertikale Ausrichtung mit CSS (Spezialfall)

-2

Ich arbeite Teilzeit auf einer Website für eine kleine gemeinnützige Organisation, und ich habe Probleme, ein paar Divs/Elemente für die verschiedenen Bildschirmgrößen ausgerichtet werden.Vertikale Ausrichtung mit CSS (Spezialfall)

Ich benutze Medienabfragen und Padding, um Dinge mit dem Auge zu zentrieren, aber das macht es unmöglich, es zu haben, wie das Fenster die Größe ändert. Ich schätze, ich weiß, dass es nicht der richtige Weg ist, die prozentuale Polsterung zu verwenden, um die Elemente zu zentrieren, aber ich weiß nicht, wie es mit der richtigen Übung aussieht.

Hier ist ein Screenshot der Elemente in Frage:

Und hier ist die site.

Ich werde nicht alle Elemente im Bild übereinander in der Mitte des Headers stapeln, aber nur bei kleineren Größen, aber ich kann CSS nicht wirklich herausfinden. Kann mir jemand in die richtige Richtung zeigen?

Dank

Quelle

2016-08-04 c3066521

einfache, moderne Technik: [Mitte Elemente vertikal und horizontal mit Flexbox] (http://stackoverflow.com/a/33049198/3597276) –

vielleicht mit einem out of the box Gittersystem wie http://getbootstrap.com/, um Ihnen die Ausrichtung zu geben, die Sie benötigen – haxxxton

Bitte Stellen Sie eine [MCVE] (https://stackoverflow.com/help/mcve) bereit. Ein Link zu einer Website, die sich ändern wird, ist für zukünftige Benutzer nutzlos. Der Versuch, eine ganze Seite zu debuggen, ist schmerzhaft, noch mehr, wenn Sie es ändern, während wir versuchen herauszufinden, was vor sich geht. –

Es gibt viele Möglichkeiten, wie Sie dies tun könnte. Am einfachsten wäre es wahrscheinlich, Container für die linke und rechte Seite zu verwenden, ihre Breiten auf 50% zu setzen und sie nach links zu schweben. Verwenden Sie dann Ihre Medienabfrage, um sie in einer bestimmten Größe in voller Breite darzustellen.

css:

.half {float:left; width:50%; text-align:center;} 

@media screen and (max-width:800px) { 
    .half {width:auto; float:none;} 
}

html:

<div class="half"> 
    <img src="http://placehold.it/350x150"> 
</div> 
<div class="half"> 
    <img src="http://placehold.it/350x150"> 
</div>

Gefallen Sie diese JSFiddle

Quelle

2016-08-04 04:43:52 user500665

Vertikale Ausrichtung mit CSS (Spezialfall)

Antwort

Verwandte Themen