it-swarm.com.de

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

Ich versuche, ein <div>-Blockelement auf einer Seite horizontal zu zentrieren und auf eine minimale Breite einzustellen. Was ist der einfachste Weg, dies zu tun? Ich möchte, dass das <div>-Element mit dem Rest meiner Seite inline ist. 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
666
cmcginty

Im Falle eines nicht feststehenden width div (d. H. Sie wissen nicht, wie viel Speicherplatz das div belegt).

#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>

Beachten Sie, dass die Breite von #yourdiv dynamisch ist -> sie wird größer und kleiner, um den darin enthaltenen Text aufzunehmen.

Sie können die Browserkompatibilität unter Caniuse überprüfen.

731
Tivie

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 div hinzufügen:

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>

556
Antony Scott
margin: 0 auto;

wie ck gesagt hat , min-width wird nicht von allen Browsern unterstützt

55
Russ Cam

Der Titel der Frage und der Inhalt ist tatsächlich unterschiedlich, daher werde ich zwei Lösungen dazu veröffentlichen, die Flexbox verwenden.

Ich denke, Flexbox wird die aktuelle Standardlösung ersetzen, wenn IE8 und IE9 vollständig zerstört sind;)

Überprüfen Sie die aktuelle Browser-Kompatibilitätstabelle für Flexbox .

Einzelelement

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

Mehrere Elemente, aber nur ein zentrieren

Das Standardverhalten ist flex-direction: row, wodurch alle untergeordneten Elemente in einer einzigen Zeile ausgerichtet werden. Wenn Sie flex-direction: column einstellen, werden die Zeilen gestapelt.

.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>

36
Manoj Kumar

CSS,HTML:

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

Ihr Diagramm zeigt auch ein Block-Level-Element (welches normalerweise ein div ist), kein Inline-Element.

min-width wird von FF2 +/Safari3 +/IE7 + unterstützt. Kann für IE6 mit hackety CSS oder einem einfachen JS verwendet werden.

27
sjh

Wenn alte Browser kein Problem darstellen, 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 Polsterungen hat, die aber relativ einfach zu berücksichtigen sind. Der Code folgt.

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

Was das macht, ist: 

  1. Positionieren Sie das div relativ zu seinem Container.
  2. Positionieren Sie die linke Begrenzung des div bei 50% seiner Containerbreite horizontal.
  3. Horizontal um 50% von der eigenen Breite der divzurückübersetzen.

Es ist leicht, sich diesen Prozess vorzustellen, um zu bestätigen, dass die div schließlich horizontal zentriert wäre. 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 eingängigen Dinge tun müssen, z. B. die Art des div-Objekts in Betracht ziehen, ihn in einen (oft semantisch unbrauchbaren) zusätzlichen Container einwickeln oder ihm eine feste Breite zuweisen, was nicht der Fall ist immer möglich.

Vergessen Sie ggf. nicht die Herstellerpräfixe für transform.

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

Die minimale Breite wird nicht global unterstützt, kann jedoch mit implementiert werden

.divclass {
   min-width: 200px;
}

Dann kannst du dein div einstellen 

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

Sie sollten position: relative und text-align: center für das übergeordnete Element und dann display: inline-block für das untergeordnete Element verwenden, das Sie zentrieren möchten. Dies ist ein einfaches CSS-Entwurfsmuster, das für alle gängigen Browser geeignet ist. Hier ist ein Beispiel oder check das CodePen Example .

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>

10
Joshua Pekera

sie können margin: 0 auto für Ihre CSS anstelle von margin-left: auto; margin-right: auto; verwenden.

8
Zawarudo

Bitte verwende den Code unten und dein Div wird in der Mitte sein.

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

Wenn Sie wissen, wie breit Ihr Div ist, können Sie das folgende CSS verwenden:

margin-left: calc(50% - 'half-of-your-div-width');

wo 'half-of-your-div-width' (offensichtlich) die Hälfte der Breite Ihres div sein sollte.

4
P.Petkov

Nach neun Jahren dachte ich, es sei Zeit für eine neue Version. Hier sind meine zwei (und jetzt einer) Favoriten.

Spanne

Setzen Sie margin auf auto. Sie sollten wissen, dass die Richtungssequenz margin: *top* *right* *bottom* *left*; oder margin: *top&bottom* *left&right* ist.

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>           
                <div>The div</div>
        </article>
    </body>
</html>

Center: Benachteiligt, benutzt das nicht!

Verwenden Sie <center></center>-Tags als Umlauf um Ihren <div></div>.

Beispiel:

aside{
    display:block;
    background-color:green;
    width: 50px;
    height: 100px;
    float: left;
}

center{
    display:block;
    background-color:grey;
    height: 100px;
    margin-left: 50px; /* Width of the aside */
}

div{
    display:block; 
    width: 60px; 
    height: 60px; 
    background-color:blue;
    color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>
            <center>
                <div>The div</div>
            </center>
        </article>
    </body>
</html>

4

Wenn Ihr <div>position: absolute hat, müssen Sie width: 100%; verwenden.

#parent {
    width: 100%;
    text-align: center;
}

    #child {
        display: inline-block;
    }
2

Hier füge ich die richtige Antwort hinzu

Sie können diesen Codeausschnitt verwenden und anpassen. Hier verwende ich 2 untergeordnete Blöcke. Dies sollte die Mitte der Seite anzeigen.

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>
2
CodeSnippet

.center {
  height: 20px;
  background-color: blue;
}

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}
<div class="center">
  <div>You text</div>
</div>

JsFiddle

2
Lex

Fügen Sie diese Klasse zu Ihrer CSS-Datei hinzu.

1) erstes erstellen

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2) füge dies deiner css hinzu

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
}
1
Urvashi Bhatt

Verwendung von margin-left: auto und margin-right: auto funktioniert in bestimmten Situationen möglicherweise nicht. Hier ist eine Lösung, die immer funktionieren wird. Sie geben eine erforderliche Breite an und setzen dann einen linken Rand auf die Hälfte der verbleibenden Breite.

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>
1
azakgaim

In Ihre HTML-Datei schreiben Sie:

<div class="banner">
  Center content
</div>

ihre CSS-Datei, die Sie schreiben:

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}

funktioniert bei mir.

1
krekto

Die beste Antwort auf diese Frage ist die Verwendung von margin-auto. Sie müssen jedoch die width Ihrer div in px oder % kennen.

CSS-Code:

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}
0
Ayman EL Ouafi

Ich verwende div- und span-Tags zusammen mit css-Eigenschaften wie block, Inline-Block für Browser und Textausrichtung

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>
0