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

2voto

Mohammad Shahnewaz Sarker Punkte 509

Hier füge ich die richtige Antwort hinzu

Sie können dieses Codeschnipsel verwenden und anpassen. Hier verwende ich 2 Child-Blöcke, die die Mitte der Seite anzeigen sollen. Sie können einen oder mehrere Blöcke verwenden.

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

Beantwortet el 7 de Kann, 2015 von Mohammad Shahnewaz Sarker (509 Punkte )

Answer 3

1voto

Ayman EL Ouafi Punkte 11

Die beste Antwort auf diese Frage ist die Verwendung von margin-auto aber um es zu benutzen, müssen Sie die width Ihrer div en px o % .

CSS-Code:

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}

Beantwortet el 15 de Februar, 2015 von Ayman EL Ouafi (11 Punkte )

Answer 4

1voto

krekto Punkte 1323

In Ihrer 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 für mich.

Beantwortet el 23 de Juni, 2017 von krekto (1323 Punkte )

Answer 5

1voto

azakgaim Punkte 189

Die Verwendung von margin-left:auto und margin-right:auto kann in bestimmten Situationen nicht funktionieren. 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>

Beantwortet el 7 de September, 2017 von azakgaim (189 Punkte )

Answer 6

0voto

amachree tamunoemi Punkte 783

Ich verwende div- und span-Tags zusammen mit CSS-Eigenschaften wie block, cross-browser inline-block und text-align center, siehe mein einfaches Beispiel

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

Beantwortet el 20 de April, 2017 von amachree tamunoemi (783 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: