HTML/CSS Wie kann ich dies in der Mitte von div machen?

MY HTML:

<div id="reszta"> 
    <h1>HELP ME</h1> 
    <div class="app-container"> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    <div class="app"> 
     <img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"> 
     <div class="title">Tytuł</div> 
     <div class="price">{{0.00 | currency}}</div> 
    </div> 
    </div> 
    </div>

und es gibt CSS:

https://paste.ofcode.org/eCENzdgqewVd9AWbNAe45u

Wie kann ich diese .app divs auf Mitte des div .app-Container sein, zu machen? Jetzt gibt es Float auf der linken Seite dieses .app-Containers. Jemand hat eine gute Lösung? Vielleicht etwas mit Rand oder Mindestbreite? Ich weiß es nicht.

Quelle

2017-08-01 Jeremy Clarkson

wollen Sie sie noch in 2 Reihen zu sein, aber zentriert? Oder möchten Sie sie gestapelt (1 pro Zeile) und zentriert? – Andrea

Entfernen Sie die Eigenschaft 'float: left' aus' .app' und fügen Sie 'display: inline-block' hinzu https://jsfiddle.net/ns0k2zpg/ –

Ich möchte in 2 Zeilen aber zentriert sein. @Ihazkode danke, es funktioniert. –

Mit dem aktuellen CSS werden die App-Divs gezwungen, in derselben Zeile zu erscheinen (während innerhalb des Eltern-Divs noch Platz für sie ist) und linksbündig zu sein. Das ist dein Schwimmer: links. Angenommen, Sie möchten immer noch mehrere app divs in derselben Zeile haben, aber Sie möchten sie zentriert haben, ist es am einfachsten, sie in Inline-Block-Elemente zu ändern und dann die Tatsache zu nutzen, dass Inline- und Inline-Block-Elemente auf die reagieren CSS-Stil "text-align: center". Erstens ändern sich die CSS für Ihre App divs (den Schwimmer entfernen, hinzufügen Anzeige):

.app{ 
    width: 10%; 
    min-height: 100px; 
    text-align: center; 
    border: 1px solid black; 
    padding: 10px; 
    margin-left: 1.4%; 
    margin-top: 1.2%; 
    background-color: white; 
    border: 1px solid blue; 
    display: inline-block; 
}

Dann brauchen Sie text-align hinzuzufügen: Mitte zum Elternelement:

.app-container{ 
    min-width: 15%; 
    max-width: 75%; 
    height: 590px; 
    margin: auto; 
    border: 1px solid green; 
    text-align: center; 
}

Quelle

2017-08-01 16:21:23 Andrea

HTML/CSS Wie kann ich dies in der Mitte von div machen?

Antwort

Verwandte Themen