floats zentrieren für responsive Inhalte

[Tschousef]

Hallo,

floats zu zentrieren ist ja jetzt nicht das große Ding:
container-div der float-Elemente mit margin-left:auto und margin-right:auto sowie einer width-Angabe versehen und fertig.

Fixe width-Angaben sind nun aber Gift für responsive Webdesign-Ansätze, daher meine Frage: wie lassen sich float-Elemente ohne Breiten-Angaben des parent-Elements zentrieren?

Danke,
j.

[Matthias Apsel]

Om nah hoo pez nyeetz, Tschousef!

wie lassen sich float-Elemente ohne Breiten-Angaben des parent-Elements zentrieren?

Am besten, indem man keine floats missbraucht. Verwende flex-box.

Matthias

[Tschousef]

Om nah hoo pez nyeetz, Tschousef!

wie lassen sich float-Elemente ohne Breiten-Angaben des parent-Elements zentrieren?

Am besten, indem man keine floats missbraucht. Verwende flex-box.

Matthias

Hm... Schön und gut, aber mit der Unterstützung für CSS3  sieht's leider noch etwas mau aus :(

Keine Chance das mit float umzusetzen?

(wobei, zugegeben, responsive-Umsetzung ohne CSS3 klingt nach Quadratur des Kreises)

[bubble]

Keine Chance das mit float umzusetzen?

Je nach Gegebenheiten macht's vielleicht ein display: inline-block; mit text-align: center;

Ohne das HTML-Konstrukt zu kennen ist das aber natürlich ins Blaue geschossen.

MfG
bubble

[Tschousef]

Keine Chance das mit float umzusetzen?

Je nach Gegebenheiten macht's vielleicht ein display: inline-block; mit text-align: center;

Funktioniert. Allerdings eben nur mit "text-align: center". Der Text soll aber nicht zentriert, sondern in einem Blocksatz dargestellt werden (abgesehen davon, dass es semantischer Unfug ist).

Egal ob "float:left" oder "display:inline-block", mit "margin:auto" bekommt man beide Varianten (OHNE Angaben zu "width") NICHT dazu, den Inhalt zu zentrieren. Ist das irgendwie möglich?

Ohne das HTML-Konstrukt zu kennen ist das aber natürlich ins Blaue geschossen.

...aufmerksames Durchlesen der Angabe wirkt Wunder:

container-div der float-Elemente mit margin-left:auto und margin-right:auto

[Gunther]

Hi!

Keine Chance das mit float umzusetzen?

Je nach Gegebenheiten macht's vielleicht ein display: inline-block; mit text-align: center;

Funktioniert. Allerdings eben nur mit "text-align: center". Der Text soll aber nicht zentriert, sondern in einem Blocksatz dargestellt werden

Ohne dass du uns mal den relevanten HTML Code zeigst, wird es schwierig.
Aber du sprachst doch eben schon selber von "Container-Element" ...!

(abgesehen davon, dass es semantischer Unfug ist).

CSS hat keine Semantik.

Egal ob "float:left" oder "display:inline-block", mit "margin:auto" bekommt man beide Varianten (OHNE Angaben zu "width") NICHT dazu, den Inhalt zu zentrieren. Ist das irgendwie möglich?

Was denn jetzt? Das Element, oder dessen "Inhalt" (Kindelemente?)?

Gruß Gunther

[Tschousef]

Hi!

Keine Chance das mit float umzusetzen?

Je nach Gegebenheiten macht's vielleicht ein display: inline-block; mit text-align: center;

Funktioniert. Allerdings eben nur mit "text-align: center". Der Text soll aber nicht zentriert, sondern in einem Blocksatz dargestellt werden

Ohne dass du uns mal den relevanten HTML Code zeigst, wird es schwierig.
Aber du sprachst doch eben schon selber von "Container-Element" ...!

(abgesehen davon, dass es semantischer Unfug ist).

CSS hat keine Semantik.

Wieso sollte CSS keine Semantik haben?
Aber es stimmt schon, in diesem Kontext geht's tatsächlich nicht um Semantik.

Egal ob "float:left" oder "display:inline-block", mit "margin:auto" bekommt man beide Varianten (OHNE Angaben zu "width") NICHT dazu, den Inhalt zu zentrieren. Ist das irgendwie möglich?

Was denn jetzt? Das Element, oder dessen "Inhalt" (Kindelemente?)?

Gruß Gunther

Ok, wir könnten es sogar einfacher machen: gesetzt der Fall, ich hätte nur ein <div>. Wie ließe es sich ohne Angaben zu width und ohne text-align zentrieren?

[ChrisB]

Hi,

Ok, wir könnten es sogar einfacher machen: gesetzt der Fall, ich hätte nur ein <div>. Wie ließe es sich ohne Angaben zu width und ohne text-align zentrieren?

Ohne Angabe zu width nimmt es als block-Element die komplette Breite ein – und *ist* damit bereits „zentriert”.

MfG ChrisB

[Gunther]

Hi!

Ok, wir könnten es sogar einfacher machen:

Stimmt ...

gesetzt der Fall, ich hätte nur ein <div>. Wie ließe es sich ohne Angaben zu width und ohne text-align zentrieren?

... gar nicht!

Aber ich verstehe nach wie vor weder dein Vorhaben, noch dein Problem.
Und bezogen auf dein Ausgangsposting "funktionieren" relative Angaben wie bspw. Prozentwerte sehr gut mit responsiven und fluiden Layouts.

Wenn du nicht willst, dass ein (Blocklevel) Element die gesamte zur Verfügung stehende Breite einnimmt, dann muss das ja einen Grund haben. Und der Grund sollte dann auch einen verwendbaren Wert für width liefern. Und schon hast du kein Problem mehr.

Gruß Gunther

[JürgenB]

Hallo Tschousef,

hier habe ich im Breich "Parametereingabe" mehrere gefloatete <p> zentriert. Ich benutze hierzu umgebende Divs mit display: table und display: table-cell; vertical-align: middle; text-align:center .

Gruß, Jürgen

[David]

width:80% /* oder was auch immer für ein prozentwert dir recht ist */
position:absolute;
left:50%;
margin-left:-40% /* die (negative) hälfte der oben eingestellten prozentualen breite */

suchst du sowas?

[Tschousef]

Ok, ich bin da wohl einem eher dummen Fehler aufgesessen...

Der Quell allen Übels lag woanders als vermutet.

Da sich die Prozentangaben eines DIVs auf das parent-Element und NICHT auf den <BODY>
beziehen, kann das parent-Element mit ihnen wunderbar "ausgefüllt" werden (z.B. zwei
DIVs à 50%). So gesehen erscheint es dann auch nachvollziehbar, dass das parent-Element
wiederum eine WIDTH-Angabe benötigt - denn irgendeine Ausgangsbreite muss ja gegeben
sein.

Trotzdem danke an alle, die versucht haben, mir mit Rat und Tat zur Seite zu stehen!

j.