✔ horizontal zentrieren

rernanded

rernanded

Erfahrenes Mitglied
Hallo

ich habe per float: left beliebige viele(je nach Bildschirmbreite) und beliebig hohe divs nebeneinander und die muß ich nun horizontal zentrieren.
PHP: 
.classic{float:left;}

<div class="classic">
< echo $versch_content_aus_datenbank_mit_unterschiedl_vielen_zeichen; >
</div>

vgl. Panflöte wo die einzelnen Flöten oben bündig sind = so eben nicht
MONI
 
Zuletzt bearbeitet:
Toll.
Du musst uns schon das zeigen, was im Browser ankommt und das CSS dazu..
Float ist dafür nicht gedacht.Das kann man mit flex/grid besser machen
 
Mehr gibt es nicht. Habe es mit flex so gelöst. Nun wird content($wow) zwar nebeneinander, aber immer unten bündig angezeigt, wie eine umgedrehte Panflöte. Ansonsten ist alles wie gewünscht, zB beim Verkleinern des Bildschirms. MONI
PHP: 
<style>
.container {
 display: inline-flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: flex-start;
 align-items: center;
 align-content: flex-start;
     background-color: #FFF;
     padding-top: 30px;
     padding-bottom: 30px;
}
.items {
order: 1000;
flex-basis: auto;
align-self: auto;
}
.content {
  border-radius: 10px;
}
</style>

</head>
<body>

<?php

...

foreach (array($result) as $wow) {
?>

<div class="container">
        <div class="items">
                <div class="content">
                        <?php echo $wow."<br />"; ?>
                </div>
        </div>
</div>

<?php

}
}

?>
 
Zuletzt bearbeitet:
Nein funktioniert mit Deinem css-Code nicht. Es funktioniert aber dann, wenn ich in meinem css-Code .container durch body ersetze. Dann gehts. Danke soweit.

Allerdings wird flex nun auf alles angewandt was sich im body befindet.
Ich habe alles andere probiert. Es geht nur wenn ich es so mache:
HTML: 
<style>
body {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
}
.items {
background-color: #FFF;
padding-top: 30px;
padding-bottom: 30px;
}
.content {
border-radius: 10px;
}
</style>

<body>
<div class="container">
        <div class="items">
                <div class="content">
                        <?php echo $wow."<br />"; ?>
                </div>
        </div>
</div>
</body>

Sobald ich im <style> body gegen .container austausche, wird wieder alles unten bündig wiedergegeben.

MONI
 
Ich verstehe leider nicht was du genau meinst.
Hast du dein code mal bei codepen getestet?
So wie du es gepostet hast, ist da ein Container oben links.

Link zur Lösung


Das entspricht keiner der beiden Aussagen.

Zum Testen brauch man den Code der im Browser ankommt.
Das, was du da gepostet hast, macht das, was du da im Codepen siehst.
Den PHP code habe ich gegen Text getauscht m sonst würde man da gar nichts sehen.
 
Zuletzt bearbeitet:
Ich habe nur die ursprüngliche class="classic" in "content" umbenannt.

Dann setz' doch mal mehrere

<div class="content">

</div>

in Deinen Code rein. Probier auch mal mit

<a class="content" href=...>

</a>

Ich teste direkt per upload auf dem Server und mit dem neuesten Firefox.

MONI
 
Der Code in #5 funktioniert doch wie ursprünglich von mir gewünscht. Dein Hinweis auf flex statt float war also gut. Er funktioniert aber nur wenn ich die properties auf body anwende und nicht auf .container.
Die selben properties auf .container angewandt ergeben nicht mein Wunschergebnis (=horizontale Zentrierung), sondern eine Bündigkeit unten. Wie bei einer umgedrehten Panflöte.

MONI
 
Hi @rernanded ,
also ich verstehe nicht so ganz was Du möchtest.
Möchtest Du das deine .Items oder .content zentriert im Body stehen? Oder wie soll das zentriert werden?

Du kannst zwar den Body stylen aber grad bei Flexbox würd ich Dir raten das nicht auf Body zu machen. das wirkt sich sonst auf alle Elemente Deiner Webseite aus.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück