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

Question

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

Gefragt el 6 de Marsch, 2009: Wann wurde die Frage gestellt
1191428 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Diese Frage hat bereits Antworten:

Wie man ein Element horizontal zentriert (128 Antworten )

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

Gefragt el 6 de Marsch, 2009 von cmcginty

0 Stimmen

Mir gefällt keine dieser Antworten. Was ist die Lösung, wenn man die Breite nicht kennt? Es könnte zum Beispiel nur ein einziges Wort sein.

Kommentiert el 7 de Dezember, 2011 von RGBK

1 Stimmen

Und es ist zu beachten, dass das Ausrichten keine Wirkung hat, wenn die Breite 100% beträgt.

Kommentiert el 31 de Kann, 2013 von Amol M Kulkarni

2 Stimmen

Ich habe gerade herausgefunden, dass Webgenerator: howtocenterincss.com Es gilt: Was immer Sie zentrieren wollen, Sie können es zentrieren, wie Sie wollen ;)

Kommentiert el 28 de Februar, 2018 von Sylhare

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

8voto

P.Petkov Punkte 1439

Wenn Sie die Breite Ihres Divs kennen und sie fest ist, können Sie das folgende CSS verwenden:

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

wobei 'half-of-your-div-width' (natürlich) die Hälfte der Breite Ihres Divs sein sollte.

Beantwortet el 1 de Marsch, 2018 von P.Petkov (1439 Punkte )

Answer 3

5voto

Urvashi Bhatt Punkte 446

Fügen Sie diese Klasse zu Ihrer CSS-Datei hinzu und es wird perfekt funktionieren Schritte zu tun:

1) Erstellen Sie diese zuerst

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

2) Fügen Sie dies zu Ihrem css hinzu

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

Beantwortet el 29 de September, 2017 von Urvashi Bhatt (446 Punkte )

Answer 4

5voto

Orry Punkte 661

Nach neun Jahren dachte ich, es sei an der Zeit, eine neue Version herauszubringen. Hier sind meine zwei (und jetzt eine) Favoriten.

Marge

Satz margin à auto . Sie sollten wissen, dass die Reihenfolge der Richtungen wie folgt ist margin: *top* *right* *bottom* *left*; o margin: *top&bottom* *left&right*

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>

Zentrum: Entwertet, nicht verwenden!

Utilisez <center></center> Tags als Umhüllung für Ihre <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>

Beantwortet el 11 de Februar, 2018 von Orry (661 Punkte )

Answer 5

3voto

Marcio Mazzucato Punkte 8273

Wenn Ihr <div> tiene position: absolute müssen Sie width: 100%;

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

    #child {
        display: inline-block;
    }

Beantwortet el 24 de April, 2015 von Marcio Mazzucato (8273 Punkte )

Answer 6

3voto

Lex Punkte 2458

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

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}

<div class="center">
  <div>You text</div>
</div>

JsFiddle

Beantwortet el 9 de Dezember, 2014 von Lex (2458 Punkte )

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

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

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

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: