div span elemente nicht korrekt zentriert

[Zornbringer]

hallo, ich arbeite an einer homepage und habe ein problem, das ich mir nicht erklären kann. habe es mal anhand eines bildes veranschaulicht.



(ignoriert bitte, wie es aussieht. es ist in erster line spielerei und work in progress.)

hier sind die styles:

div#kasten
{
display: flex;
flex-flow: row wrap;
justify-content: center;
text-align:center;
margin:0;
padding:0;
}

span#kastenelement
{
border-color: #137512;
border-width: 16px;
border-style: solid;
border-radius: 32px;
margin: 16px;
padding: 16px;
background-color: #cccccc;
height:auto;
}

wenn ich das browserfenter verkleiner und die unteren kästen verschoben werden, sowohl 2+1 untereinander, sowie alle 3 untereinander, sind alle 4 kästen exakt zentriert angeordnet. nur in dieser default ansicht nicht und ich habe keine ahnung wieso.

 

[HueftSteak]

weil die box mit "suchen in ordnung" breiter ist als die anderen

 

[Zornbringer]

ja, natürlich. das passiert, wenn man sich nur den code anguckt. danke.

 

[wilk84]

1. Es fehlt der HTML-Code, damit man dir besser helfen kann
2. Am besten den Abschnitt bei JSfiddle hochladen und den Link hier teilen
3. ID's (#) sind einmalig und sollten auch so verwendet werden
4. Machst du weitere grundlegende Fehler, was bedeutet, dass dir HTML/CSS Grundkenntnisse fehlen
5. Das Ding wird dir um die Ohren fliegen, wenn deine DB queries eine ähnliche Qualität haben

 

[floTTes]

<span> ist ein Inline-Tag. Für deine Zwecke sollten auch die Children <div> nutzen.

wilk84 hat mit den IDs absolut Recht: diese sind als unique definiert - also ID kasten dringend zu einer Klasse machen.
Du kannst die Children auch direkt ansprechen: div.kasten > div

So wie es aussieht, ist "Platzhalter" nicht nur nicht zentriert. "Platzhalter" ist auch größer als "Suchen in Familie". Du wirst also mit (min-/max-)width arbeiten müssen.

Es gäbe auch die Möglichkeit allen Children nur ein margin auf der rechten Seite zu verpassen und dem :last-child diesen margin dann zu entziehen.

 

[Zornbringer]

danke für die hinweise. ich habe die id tags bereits korrigiert und in klassen umgewandelt.

das problem mit der zentrierung wurde übrigens von @HueftSteak bereits gelöst. es ist eigentlich so banal, aber wenn man nur den code anguckt, sieht man halt nichts falsches.

ich hab jetzt erst mal alle kästen auf eine fixe größe gesetzt. ist wie gesagt noch alles wip und spielerei. wie es weitergeht werde ich sehen.