Wie zentriert man einfach horizontal a mit CSS? [duplicate]

Lesezeit: 7 Minuten

Ich versuche, a horizontal zu zentrieren <div> block-Element auf einer Seite und setzen Sie es auf eine minimale Breite. Was ist der einfachste Weg, dies zu tun? Ich will das <div> Element, das mit dem Rest meiner Seite inline ist. Ich versuche mal ein Beispiel zu zeichnen:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

  • Mir gefällt keine dieser Antworten. Was ist die Lösung, wenn Sie die Breite nicht kennen? Das kann zum Beispiel nur ein einziges Wort sein.

    – RGBK

    7. Dezember 2011 um 1:10 Uhr

  • Und der zu beachtende Punkt hat keine Auswirkung, wenn die Breite 100 % beträgt.

    – Amol M. Kulkarni

    31. Mai 2013 um 14:09 Uhr

  • Ich finde gerade diesen Webgenerator heraus: howtocenterincss.com Es tut für: Sie, was auch immer Sie versuchen zu zentrieren, wie auch immer Sie es zentriert haben möchten. 😉

    – Sylhare

    28. Februar 2018 um 16:44 Uhr


  • Mach das so: div.e1{text-align: center;}

    – Homann

    28. Dezember 2019 um 19:01 Uhr


Wie zentriert man einfach horizontal a mit CSS duplicate
Tivie

Im Falle eines nicht feste Breite div (dh Sie wissen nicht, wie viel Platz das div einnehmen wird).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Denken Sie daran, dass die Breite von #yourdiv ist dynamisch -> es wird wachsen und schrumpfen, um den darin enthaltenen Text aufzunehmen.

Sie können die Browserkompatibilität auf überprüfen Kann ich benutzen

  • Ich benutze seit langem die Lösung “margin:0 auto”, aber diese ist besser.

    – Näh

    6. Februar 2014 um 9:39 Uhr

  • @UriKlar Weil margin: 0 auto einfacher und semantisch korrekter ist.

    – bjb568

    9. Februar 2014 um 7:51 Uhr

  • Dies hat mein Problem behoben, als margin:0 auto würde nicht.

    – Kenny Johnson

    9. April 2014 um 22:45 Uhr

  • Diese Lösung macht Inline-Block nützlich!

    – Erlend KH

    27. November 2015 um 13:48 Uhr

  • Ein Nachteil dieser Methode ist, dass text-align: center wird vererbt und wirkt sich daher auf den Inhalt aus, während margin: 0 auto nicht.

    – Csati

    17. März 2017 um 16:03 Uhr

Wie zentriert man einfach horizontal a mit CSS duplicate
Anton Scott

In den meisten Browsern funktioniert dies:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

In IE6 müssen Sie eine weitere äußere hinzufügen div:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>

  • Ja, aufgrund von Layoutfehlern in IE vor IE7 müssen Sie dies tun. Aber in IE8 reicht ein einfaches text-align: center aus. 🙂

    – Eriawan Kusumawardhono

    6. März 2009 um 9:10 Uhr

  • Das bedeutet, dass IE8 immer noch falsch ist, da es kein Text ist.

    – cjk

    6. März 2009 um 9:15 Uhr

  • @Antony Scott: Es muss sich im strikten Modus befinden (hat einen beliebigen Doctype deklariert).

    – Tom

    6. März 2009 um 10:14 Uhr

  • Außerdem … funktioniert nur, wenn Sie die Breite des Containers kennen. Wenn sich die Breite ändert, müssen Sie Ihr CSS aktualisieren (was stinkt, wenn der Inhalt dynamisch generiert wird)

    – BMiner

    12. August 2011 um 14:30 Uhr

  • Ich bin mir ziemlich sicher, dass es funktionieren würde, wenn Sie die Breite Ihres Inhalts nicht kennen, aber Sie müssten die Breite auf etwas festlegen, da ein Div auf die Breite seines Containers erweitert wird.

    – Antony Scott

    12. August 2011 um 15:19 Uhr

1646317328 53 Wie zentriert man einfach horizontal a mit CSS duplicate
Russ Cam

margin: 0 auto;

wie ck schon sagte, Mindestbreite wird nicht von allen Browsern unterstützt

  • Beachten Sie, dass dies nur funktioniert, wenn das Element auch seine hat width Eigenschaftssatz. Wenn Sie möchten, dass die Breite des Elements dynamisch ist (basierend auf seinem Inhalt), lesen Sie die ausgewählte Antwort.

    – Niko Bellic

    7. März 2017 um 0:45 Uhr

Der Titel der Frage und der Inhalt sind tatsächlich unterschiedlich, daher werde ich zwei Lösungen dafür posten Flexbox.

ich schätze Flexbox wird die aktuelle Standardlösung ersetzen/ergänzen, bis IE8 und IE9 vollständig zerstört sind 😉

Überprüfen Sie den Strom Browser-Kompatibilitätstabelle für Flexbox

Einzelnes Element

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Mehrere Elemente, aber nur eines zentrieren

Standardverhalten ist flex-direction: row Dadurch werden alle untergeordneten Elemente in einer einzigen Zeile ausgerichtet. Einstellen auf flex-direction: column wird helfen, die Zeilen zu stapeln.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}
<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>

1646317329 260 Wie zentriert man einfach horizontal a mit CSS duplicate
wh1t3cat1k

Wenn alte Browser kein Problem sind, verwenden Sie HTML5 / CSS3. Wenn dies der Fall ist, wenden Sie Polyfills an und verwenden Sie weiterhin HTML5 / CSS3. Ich gehe davon aus, dass Ihr div hier keine Ränder oder Auffüllungen hat, aber sie sind relativ einfach zu berücksichtigen. Der Code folgt.

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Was das bewirkt ist:

  1. Positionieren Sie die div relativ zu seinem Behälter;
  2. Positionieren Sie die div‘s linke Grenze bei 50 % von seine Behälterbreite horizontal;
  3. Horizontal um 50 % zurückübersetzen der diveigene Breite.

Es ist leicht, sich diesen Prozess vorzustellen, um zu bestätigen, dass die div würde schließlich horizontal zentriert werden. Als Bonus können Sie vertikal zentrieren ohne zusätzliche Kosten:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Der Vorteil dieses Ansatzes besteht darin, dass Sie keine kontraintuitiven Dinge tun müssen, z. B. Ihr div als eine Art Text betrachten, es in einen (oft semantisch nutzlosen) zusätzlichen Container packen oder ihm eine feste Breite geben müssen, was nicht der Fall ist immer möglich.

Vergessen Sie nicht die Herstellerpräfixe für transform wenn benötigt.

  • Ein Problem bei der horizontalen Methode besteht darin, dass das zentrierte Element nicht dynamisch über 50 % der Breite des übergeordneten Elements hinaus skaliert wird: jsfiddle.net/ywy9w3gk

    – Benutzer2145184

    8. Dezember 2016 um 17:53 Uhr


1646317330 815 Wie zentriert man einfach horizontal a mit CSS duplicate
Octavian A. Damian

.center {
   margin-left: auto;
   margin-right: auto;
}

Mindestbreite wird nicht global unterstützt, kann aber mit implementiert werden

.divclass {
   min-width: 200px;
}

Dann können Sie Ihr div auf sein setzen

<div class="center divclass">stuff in here</div>

  • Ein Problem bei der horizontalen Methode besteht darin, dass das zentrierte Element nicht dynamisch über 50 % der Breite des übergeordneten Elements hinaus skaliert wird: jsfiddle.net/ywy9w3gk

    – Benutzer2145184

    8. Dezember 2016 um 17:53 Uhr


1646317330 477 Wie zentriert man einfach horizontal a mit CSS duplicate
Thomas Orlita

CSS, HTML:

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Ihr Diagramm zeigt auch ein Element auf Blockebene (was normalerweise ein Div ist), kein Inline-Element.

Von der Spitze meines Kopfes, min-width wird in FF2+/Safari3+/IE7+ unterstützt. Kann für IE6 mit hackety CSS oder einem einfachen Stück JS durchgeführt werden.

  • Vielen Dank für die Klärung der “Inline”-Terminologie. Ich habe versucht zu sagen, dass ich nicht wollte, dass es über einem Text schwebt.

    – cmcginty

    6. März 2009 um 10:23 Uhr

924270cookie-checkWie zentriert man einfach horizontal a mit CSS? [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy