Wie kann ich Inhalt zentrieren?

-2

Wie kann ich alle Inhalte auf der Seite zentrieren und die Reihenfolge von rechts nach links machen, weil die Ausrichtung nach links und die Reihenfolge von links nach rechts ist.Wie kann ich Inhalt zentrieren?

hier ist der Code:

bearbeiten Center Eltern div

.grid-item { 
 
    float: left; 
 
    width: 270px; 
 
    min-height: 260px; 
 
    max-height: 260px; 
 
    background-color: whitesmoke; 
 
    margin-bottom: 10px; 
 
    border: solid 5px #bfbbd9; 
 
    padding: 7px; 
 
}

<div class="parent-div"> 
 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>1</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>2</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>3</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>4</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Quelle

2017-12-02 Yusuf

Ja, also anstelle von "body" in meinem CSS-Code, ändern Sie es bitte in '.parent-div'. Lass mich wissen ob es funktioniert. Wenn es funktioniert, akzeptieren Sie die Antwort, indem Sie auf die Schaltfläche mit dem Häkchen klicken. –

als eine Gruppe, wird das Bild oben mehr zeigen. – Yusuf

Yusuf, das passiert im aktuellen Setup ... Kannst du das überprüfen? –

Sie müssen:

die parent-div mit fester Breite sein gesetzt und zentriert margin: 0 auto verwenden.
Verwenden Sie direction: rtl und text-align: right auf parent-div, um Elemente nach rechts mit Ihrer gewünschten Richtung auszurichten.
Änderung Gitterpunkt sein display:inline-block statt mit float
Medienabfragen hinzufügen, wenn Sie es möchten auf heigher Bildschirmauflösungen mehr Spalten haben.

.parent-div { 
 
    width: 592px; 
 
    margin: 0 auto; 
 
    direction: rtl; 
 
    text-align: right; 
 
} 
 

 
@media (min-width: 900px) { 
 
    .parent-div { 
 
     width: 890px 
 
    } 
 
} 
 

 
.grid-item { 
 
    display: inline-block; 
 
    width: 270px; 
 
    min-height: 260px; 
 
    max-height: 260px; 
 
    background-color: whitesmoke; 
 
    margin-bottom: 10px; 
 
    border: solid 5px #bfbbd9; 
 
    padding: 7px; 
 
}

<div class="parent-div"> 
 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>1</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>2</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>3</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>4</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 

 
    <a href="#"> 
 
    <div class="grid-item"> 
 
     <div style="height:71px"> 
 
     <h2>5</h2> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

EDIT: Ich habe für 3 Spalten in heigher Bildschirmauflösungen einen Schritt für Medienabfrage als Beispiel gegeben. Sie können das Code-Snippet im Vollbildmodus ausführen, um das Ergebnis anzuzeigen.

Quelle

2017-12-02 03:03:10

Wenn ich den Float entferne, werden zwei Spalten angezeigt, und ich möchte es in responsiven Webseiten verwenden, also wenn die große Hütte sich dehnen wird – Yusuf

Ich war diese Woche dort (meine Frage: https://Stackoverflow.com/questions/47492844/css-html-lists-zentrum-ul-in-seite-linksbündig-li-elemente). Meine Lösung war schließlich ähnlich wie hier vorgeschlagen mit Medienabfragen für die Eltern-Container-Breite für verschiedene Bildschirmgrößen. oder .. wenn Sie wollen, können Sie dies mit Bootstrap-Gitter auf den Gitter-Elemente erreichen: "col-md-xs-4 col-md-sm-3 col-md-2" und wahrscheinlich mit CSS-Tweaks für Ihr Gitter-Element . –

Momentan gibt es in css keine Möglichkeit für das Eltern-Div-Element, die Inline-Block-Elemente zu umhüllen und mit margin: 0 auto zu zentrieren. Es wird immer 100% der Seitenbreite dauern. Medienabfragen sind also Ihre einzige Option. (mit oder ohne Verwendung eines vorhandenen Rasters) –

Versuchen inline-block für display und rem mit float. Das sollte klappen.

body { 
 
    text-align: center; 
 
} 
 
a { 
 
display: inline-block; 
 
margin: 0 3px; 
 
} 
 
.grid-item { 
 
    display: inline-block; 
 
    width: 270px; 
 
    min-height: 260px; 
 
    max-height: 260px; 
 
    background-color: whitesmoke; 
 
    margin-bottom: 10px; 
 
    border: solid 5px #bfbbd9; 
 
    padding: 7px; 
 
}

<a href="#"> 
 
    <div class="grid-item"> 
 
    <div style="height:71px"> 
 
     <h2>1</h2> 
 
    </div> 
 
    </div> 
 
</a> 
 

 
<a href="#"> 
 
    <div class="grid-item"> 
 
    <div style="height:71px"> 
 
     <h2>2</h2> 
 
    </div> 
 
    </div> 
 
</a> 
 

 
<a href="#"> 
 
    <div class="grid-item"> 
 
    <div style="height:71px"> 
 
     <h2>4</h2> 
 
    </div> 
 
    </div> 
 
</a> 
 

 
<a href="#"> 
 
    <div class="grid-item"> 
 
    <div style="height:71px"> 
 
     <h2>5</h2> 
 
    </div> 
 
    </div> 
 
</a> 
 

 
<a href="#"> 
 
    <div class="grid-item"> 
 
    <div style="height:71px"> 
 
     <h2>6</h2> 
 
    </div> 
 
    </div> 
 
</a>

Vorschau in verschiedenen Auflösungen:

Mobil

Tablet/iPad

Desktop-

Quelle

2017-12-02 01:40:30

Wie kann ich Inhalt zentrieren?

Antwort

Verwandte Themen