zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drei DIVs mittig anordnen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.11.2014, 15:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2014
Beiträge: 20
vega befindet sich auf einem aufstrebenden Ast
Standard Drei DIVs mittig anordnen

Hi Leute,

ich habe ein seltsames Problem, dessen Lösung ich nicht erkennen kann.
Ich möchte drei DIVs innerhalb eines großen DIVs mittig zentrieren. Das
mache ich per text-align:center im Parent-DIV (likey) und display:inline-block
(und float:left) in den drei zu zentrierenden DIVs (fble, twle, gole).

Seltsamerweise machen der zweite und dritte DIV mit, aber der erste
weigert sich. :\

CSS:
Code:
#likey {margin: 0 auto; max-width: 58.75rem; width: 100%; min-width: 20rem; text-align: center;}
#fble {margin: 0 0.5rem; padding: 0; background: url("fblike.png") no-repeat top left; float: left; display: inline-block;}
#fble iframe {display: block; margin: 0; padding: 0; opacity: 0;}
#twle {margin: 0 0.5rem; padding; 0; display: inline-block;}
#gole {margin: 0 0.5rem; padding; 0; display: inline-block;}
Ansehen: ... erledigt

Weiß jemand Rat?

Geändert von vega (18.11.2014 um 17:44 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.11.2014, 17:27
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von vega Beitrag anzeigen
Seltsamerweise machen der zweite und dritte DIV mit, aber der erste
weigert sich. :\
Du sagst es doch selbst, Du gibst ihm ein „float: left;“.

„float“ ist deutlich stärker als „text-align“.
Durch „float“ bekommt #fble auch ein „display: block;“ - „display: inline-block:“ wird dadurch überschrieben und gilt nicht mehr.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/

Geändert von etux (18.11.2014 um 17:29 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.11.2014, 17:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2014
Beiträge: 20
vega befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
Du sagst es doch selbst, Du gibst ihm ein „float: left;“.

„float“ ist deutlich stärker als „text-align“.
Durch „float“ bekommt #fble auch ein „display: block;“ - „display: inline-block:“ wird dadurch überschrieben und gilt nicht mehr.
Ach, Shit, du hast Recht, danke. Ohne Float geht es nun. Ich ging davon aus, dass ich das Floating für die vertikale Anordnung benötige.
Mit Zitat antworten
  #4 (permalink)  
Alt 18.11.2014, 17:40
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von vega Beitrag anzeigen
... dass ich das Floating für die vertikale Anordnung benötige.
Für vertikale Anordnung brauchst Du „vertical-align“ angewendet auf „inline“- oder „inline-block“-Elementen (wie bei Dir). Voraussetzung ist auch, dass die Elementen nicht gleich hoch sind oder / und das umgebende Element höher ist.
Ansonsten mit Außen-, Innenabständen oder / und Positionierung.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
  #5 (permalink)  
Alt 18.11.2014, 17:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2014
Beiträge: 20
vega befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von etux Beitrag anzeigen
Für vertikale Anordnung brauchst Du „vertical-align“ angewendet auf „inline“- oder „inline-block“-Elementen (wie bei Dir). Voraussetzung ist auch, dass die Elementen nicht gleich hoch sind oder / und das umgebende Element höher ist.
Ansonsten mit Außen-, Innenabständen oder / und Positionierung.
Ährm, ja, sorry, das war nur ein Verschreiber. Ich meinte natürlich horizontale, nicht vertikale Anordnung beim Floating.

Vertikales Anordnen ist ja die herkömmliche Abfolge in HTML/CSS.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.11.2014, 17:56
Benutzerbild von etux
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 17.09.2007
Ort: Berlin
Beiträge: 643
etux wird schon bald berühmt werden
Standard

Zitat:
Zitat von vega Beitrag anzeigen
Ährm, ja, sorry, das war nur ein Verschreiber. Ich meinte natürlich horizontale, nicht vertikale Anordnung beim Floating.

Vertikales Anordnen ist ja die herkömmliche Abfolge in HTML/CSS.
Gut, dann belassen wir es dabei, bevor noch weitere Weisheiten das Tageslicht erblicken.
Aber ein CSS-Buch könntest Du gut gebrauchen.
Zumindest das kostenlose Online-Buch hier:

Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (Peter Müller)

.
__________________
Grüße: Emil
--------------------------------------
https://emil-webdesign.net/
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 11:23
mehrere Bilder innerhalb eines divs horizontal mittig platzieren a-i-r CSS 2 09.12.2009 15:24
Divs horizontal anordnen, mit <li>, float? funky^mariechen CSS 12 29.08.2008 03:08
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 07:32
In einem div, 2 divs mittig ausrichten heohni CSS 1 20.07.2007 15:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:41 Uhr.