1

ALLE divs mit CSS3 centrieren ?

Frage von Tiimiibo Tiimiibo

Hey,

ich habe auf meiner Seite nun 8 verschiedene Blöcke. Jeder frage ich mich wie ich nun alle mittig gestellt bekomme ? Da die Browseransichten ja immer ziemlich unterschiedlich breit ausfallen durch die Bildschirmauflösung usw. sollte IMMER ALLES mittig sein .. Also ich will alle Divs (+content) mittig stellen. Die einzelnen divs kann ich ja nicht centrieren, oder ? Wenn ich das mache geht doch sicherlich meine width und height Angabe verloren oder ? Habe es schon mit

<div class="all" id="name"> CONTENT </div>

Und in meiner CSS Datei habe ich es dann so versucht anzupassen:

.all {
 width:100%;
 position:relative;
 margin: 50% auto;
 }

Und dabei habe ich dann bei allen Blöcken (bzw Elementen) das margin auf 0 gesetzt ... Könnte mir vielleicht jemand sagen wie ich nun alle divs mittig setze ? Habe in Foren mich schon umgeschaut, jedoch nur alte Versionen gefunden, mit einem Mutterelement, welches alle anderen miteinbezeiht um diese dann mittig auszurichten aber das geht nicht mehr :S

lg und würde mich über eine schnelle und hilfreiche antwort freuen :)

Fragen zu gleichen Themen finden

Antworten (3)

  • 2
    Antwort von Whre0815 Whre0815

    Wenn alle Divs von der Seite aus gesehen mittig sein sollen, begrenzt Du die Breite und fügst

    margin:0 auto;
    

    als CSS-Befehl ein. So zentriere ich immer meinen Content. Oder verstehe ich Dich falsch?

    Kommentar von Tiimiibo Tiimiibo

    Wo soll ich Margin auf 0 setzen ? Überall ? Ist das nicht der Abstand vom Rand :S :S Content will ich nicht ausrichten, dass kann ich ja in den einzelnen Blöcken per CSS individuell ausmachen Ich will die komplette Seite die 1000px breit ist in die mitte hauen ^^

    lg & danke

    Kommentar von Whre0815 Whre0815Whre0815

    Also wenn ich eine 1000px-Seite mittig platzieren will, mache ich es so:

    #dasentsprechendediv { width:1000px; margin:0 auto; }
    

    Die 0 heißt dann, dass der Abstand zu top und bottom 0 sein soll, während rechts und links auto ist. Das Div ist dann mittig zentriert.

    Kommentar von Tiimiibo Tiimiibo
    <div id="haupt">
              <div class="all" id="head">
              <img src="images/head.jpg">
              </div>
              <div class="all" id="navi">
              125x200<br>
              höher ? (~250)
              </div>
              <div class="all" id="links">
              330x150
              </div>
              <div class="all" id="rechts">
              330x150
              </div>
              <div class="all" id="mitte">
              673x308
              </div>
              <div class="all" id="login">
              177x184
              </div>
              <div class="all" id="rang">
              177x275
              </div>
              <div class="all" id="foot">
              600x75
              </div>
              </div>
    

    So sieht mein HTML Dokument aus ^^ CSS Angabe für "haupt" sieht so aus:

    #haupt {
    width: 1000px;
    margin:0 auto;
    }
    

    Geht aber leider immernoch nicht :S An den anderen Elementen steht bei margin jeweils margin: auto; ^^

    ? :(

    Kommentar von KiraBianca KiraBiancaKiraBianca

    Hallo Tiimiibo,

    Whre hat Deine Frage ja schon so ziemlich beantwortet. Daher hänge ich mich nur mit einem Kommentar hier ran.

    Container (DIV's) sind standardmäßig immer 100% der Seitenbreite breit. Wenn Du also keine andere Breite vorgibst, bringt ein Zentrieren der Container überhaupt nichts. Aber Du willst vermutlich alle Inhalte dieser Container mittig stellen. Sofern es sich nicht um andere Block-Elemente handelt (Tabellen, weitere div's innerhalb der div's, Forms etc.), bekommst Du die ganz einfach mit einem Element text-align:center; mittig. Der Ausdruck text-align ist hier ein wenig missdeutig, denn es werden auch Bilder und anderes mittig gestellt.

    Wenn Du also Deine Klasse .all um

    text-align:center;
    

    erweiterst, hast Du wie gewünscht den Inhalt mittig.

    Gruß Kira-Bianca

  • 1
    Antwort von codingfreak codingfreak

    Du suchst text-align: center; glaube ich. Außerdem ist 100% Breite PLUS 50% Außenrand relativ gefährlich... könnte zu bösen Fehlern kommen.

    Innerhalb der divs machst du dann noch ein p, das du in CSS so stylst:

    .all > p { text-align: left; }

    So ist gewährleistet, dass der Text linksbündig ist.

    Kommentar von Tiimiibo Tiimiibo

    tex-align hat doch nichts mit den Elementen zu tun oder ?

    Das mit dem > p hab ich nicht verstanden, könntest du das ausführen?

    lg & danke

  • 0
    RatgeberHelden Antwort von kuechentiger kuechentiger

    Wie mittig? Nebeneinander? Untereinander? Wenn die alle 100% breit sind, dann können sie nicht mittig sein, sie nehmen ja die ganze Breite ein.

Diese Frage

Verwandte Fragen

Noch nicht den richtigen Rat gefunden?

Einfach und schnell viele hilfreiche Ratschläge von Deutschlands aktivster Ratgeber-Community erhalten!

Einfach und schnell einen Tipp erstellen und Ihren guten Rat mit anderen teilen!

Einfach und schnell ein Video hochladen und anschaulichen Rat an alle geben!

Die unter gutefrage.net angebotenen Dienste und Ratgeber Inhalte werden nicht geprüft. Die Richtigkeit der Inhalte wird nicht gewährleistet. Rechtliche Hinweise finden Sie hier.