tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von hela
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
812
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 31.08.11 18:30 #1
    anve anve ist offline Mitglied Bronze
    Registriert seit
    Apr 2007
    Beiträge
    28
    Ich will eine Reihe von divs innerhalb einer div zentrieren. D.h. alle div Elemente sollten so ausgerichtet werden, dass sie (je nach dem wieviel Platz sie benötigen bzw. padding-Abstand) immer mittig ausgerichtet sind und zwar alle div Elemente.

    text-align:left und margin:0 auto funktionieren nicht. Das liegt warscheinlich am float:left. Dieses benötige ich aber, da ansonsten die div-Elemente einen Zeilenumbruch einfügen und mit display:inline kann ich keine Positionierungsangaben wie padding-top:10px machen.

    Code css:
    1
2
3

    body {padding: 0; margin: 0; text-align:center; }
.text {float:left; padding:7px 10px 0 0}
.date {float:left; padding:0 10px}

    HTML-Code:
    <body>
<div id="content">
	<div class="text">text1</div>
	<div class="date">text2</div>
</div>
</body>
    Ist table die einzige Möglichkeit?

    OK ich habs so gelöst
    Code css:
    1

    #content {padding:10px 0 0 350px}
    Geändert von anve (31.08.11 um 18:42 Uhr)
     
    Zitieren Zitieren
  2. 31.08.11 18:51 #2
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Hallo,

    wenn ich das richtig verstehe, dann hast du das gleiche Problem wie hier:
    Mehrere Divs zentrieren
    anve bedankt sich. 
    Zitieren Zitieren
  3. 06.09.11 22:00 #3
    anve anve ist offline Mitglied Bronze
    Registriert seit
    Apr 2007
    Beiträge
    28
    Danke hela!

    HTML-Code:
    <div id="oberstesElement">
	<div class="centerdiv">
		<div class="unterDiv1">
		</div>
		<div class="unterDiv2">
		</div>
	</div>
</div>
    Code css:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    #oberstesElement {
    width:100%;
}
 
.centerdiv {
    float:left;
    left:50%;
    position: relative;
}
 
.centerdiv div {
    float:left;
    right:50%;
    position: relative;
}
     
    Zitieren Zitieren
  4. 12.09.11 13:51 #4
    anve anve ist offline Mitglied Bronze
    Registriert seit
    Apr 2007
    Beiträge
    28
    Ich bin gerade draufgekommen, dass dadurch die Seite breiter wird und einen unerwünschten Abstand rechts erzeugt. Was kann ich dagegen tun?

    Zwar nicht ganz perfekt, aber folgende Lösung habe ich angewandt:
    Code css:
    1
2
3
4

    .centerdiv {
    width:915px;
    margin:0 auto;
}

    Zentrierung erfolgt jedoch nicht ganz.
    Geändert von anve (12.09.11 um 14:24 Uhr)
     
    Zitieren Zitieren
  5. 05.10.11 16:29 #5
    Avatar von hela
    hela hela ist offline Mitglied Smaragd
    tutorials.de Premium-User
    Registriert seit
    Oct 2004
    Beiträge
    1.123
    Zitat Zitat von anve Beitrag anzeigen
    Ich bin gerade draufgekommen, dass dadurch die Seite breiter wird und einen unerwünschten Abstand rechts erzeugt...
    Hallo,

    tut mir leid, dass ich erst jetzt auf deinen Beitrag reagiere. Dass die Seite u.U. breiter wird ist normal, da das "centerdiv" ja verschoben wird. Damit sollte das aber keine Rolle mehr spielen, vermutlich hast du die overflow-Eigenschaft nicht dabei:

    Code css:
    1
2
3
4

    #oberstesElement {
  width:100%;
  overflow: hidden;
}
     
    Zitieren Zitieren
« 3 Spalten Layout mit Dynamischem Inhalt | Gesamte Seite zentrieren geht nicht »

Ähnliche Themen

  1. Div Trotz Float left zentrieren
    Von FunkFlex im Forum CSS
    Antworten: 5
    Letzter Beitrag: 25.08.11, 09:20
  2. float:right und float:left Probleme
    Von xGutaxJungex im Forum CSS
    Antworten: 7
    Letzter Beitrag: 22.08.09, 15:16
  3. Float:left zentrieren?
    Von Vespillo im Forum CSS
    Antworten: 12
    Letzter Beitrag: 18.10.08, 00:51
  4. Problem bei float:left und float:right im FF
    Von mbecker im Forum CSS
    Antworten: 2
    Letzter Beitrag: 01.03.06, 13:43
  5. div & float:left;
    Von Pherseus im Forum HTML & XHTML
    Antworten: 1
    Letzter Beitrag: 11.02.05, 11:02