Wie kann man ein <div> mit CSS leicht horizontal zentrieren?

Question

Ich versuche, eine horizontale Zentrierung einer <div> Blockelement auf einer Seite und setzen Sie es auf eine Mindestbreite. Wie lässt sich dies am einfachsten bewerkstelligen? Ich möchte das <div> Element inline mit dem Rest der Seite zu sein. Ich werde versuchen, 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

Answer 1

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

Die Mindestbreite wird nicht global unterstützt, kann aber mit

.divclass {
   min-width: 200px;
}

Dann können Sie Ihr div so einstellen, dass es

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

Answer 2

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), nicht ein Inline-Element.

Ganz oben auf meinem Kopf, min-width wird in FF2+/Safari3+/IE7+ unterstützt. Kann für IE6 mit hackety CSS, oder ein einfaches Bit von JS getan werden.

Answer 3

Sie sollten Folgendes verwenden position: relative y text-align: center auf das übergeordnete Element und dann display: inline-block auf das untergeordnete Element, das Sie zentrieren möchten. Dies ist ein einfaches CSS-Designmuster, das in allen gängigen Browsern funktioniert. Hier ist ein Beispiel, oder sehen Sie sich die CodePen Beispiel .

p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}

<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>

Answer 4

Bitte verwenden Sie den unten stehenden Code und Ihr div wird in der Mitte sein.

.class-name {
    display:block;
    margin:0 auto;
}

Answer 5

Können Sie margin: 0 auto in Ihrem css anstelle von margin-left: auto; margin-right: auto;