it-swarm.com.de

Wie kann ich ein Div innerhalb eines anderen Div zentrieren?

Ich habe ein Problem. Ich habe den HTML-Code wie folgt:

<div id="main_content" >
    <div id="container">
    </div>
</div>

Die CSS wie folgt: 

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

Ich vermute, dass der #container in #main_content zentriert ist. Ist es aber nicht. Ich möchte nur den Grund herausfinden und wie man es zentriert macht.

93
user2142709

Sie müssen die Breite des Containers einstellen. (auto funktioniert nicht)

#container {
    width: 640px; /*can be in percentage also.*/
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

Die CSS-Referenz von MDN erklärt alles.

Schauen Sie sich diese Links an

Update - In Aktion @ jsFiddle

80
ShuklaSannidhya

Technisch gesehen ist Ihr innerer DIV (#container) horizontal zentriert. Der Grund, den Sie nicht sagen können, ist, dass mit der CSS-Eigenschaft width: auto die innere DIV auf die gleiche Breite wie ihr übergeordnetes Element erweitert wird. 

Siehe diese Geige: http://jsfiddle.net/UZ4AE/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

In diesem Beispiel stelle ich einfach die Breite von #container auf 50px und den Hintergrund auf red ein, damit Sie sehen, dass er zentriert ist.

Ich denke, die eigentliche Frage lautet: "Wie zentriere ich Elemente horizontal mit CSS?" und die Antwort ist (Trommelwirbel bitte): es kommt darauf an!

Ich werde die unzähligen Möglichkeiten, Dinge mit CSS zu zentrieren, nicht ganz wiederholen, wenn W3Schools es hier so schön macht: http://www.w3schools.com/css/css_align.asp , aber die Grundidee ist die Für Elemente auf Blockebene geben Sie einfach die gewünschte Breite an und setzen Sie den linken und rechten Rand auf auto.

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
 }

Bitte beachten Sie: Diese Antwort gilt nur für Elemente der BLOCK-Ebene! Um ein INLINE-Element zu positionieren, müssen Sie die text-align: center-Eigenschaft des ersten übergeordneten BLOCK-Elements verwenden.

27
Jeremiah

Ein anderer interessanter Weg: Geige

css

.container{
    background:yellow;
    width: %100;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.centered-div{
    width: 80%;
    height: 190px;
    margin: 10px;
    padding:5px;
    background:blue;
    color:white;
}

html

<div class="container">
    <div class="centered-div">
        <b>Enjoy</b>
    </div>
</div>
13
iraj jelodari

Sie können Float div mit diesem kleinen Code zentrieren:

#div {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;

margin-top: -100px;
margin-left: -100px;
}
11

Nun definieren Sie einfach Ihre 

#main_contenttext-align:center und definieren Sie Ihren #containerdisplay:inline-block; 

so wie das  

#main_content{
text-align:center;
}
#container{
display:inline-block;
vertical-align:top;
}
8
Rohit Azad

es würde funktionieren, wenn die Breite des #container div gegeben würde: 80% [jede Breite ist geringer als der Hauptinhalt und in% angegeben, damit sie sowohl von links als auch von rechts gut auskommt] und einen Rand: 0px auto; OR margin: 0 auto; [beide funktionieren gut]. 

4
Vish

Versuchen Sie hinzuzufügen

text-align: center;

an Ihre übergeordnete Container-CSS-Deklaration. Und folgenden untergeordneten Container:

display: inline-block;

Es muss den Trick tun.

4
Arman P.

Ich würde versuchen, eine spezifischere Breite für Anfänger zu definieren. Es ist schwer etwas zu zentrieren, das sich bereits über die gesamte Breite erstreckt:

#container {
  width: 400px;
}
3
Jason Sears
#main_content {    
    width: 400px; margin: 0 auto;
    min-height: 300px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: auto;
    margin: 0 auto;background-color: #ccc;
    padding: 10px;
    position: relative;
}

probiere dies getestet ok. Live-Check auf jsfiddle

hier ist die Lösung 

 #main_content {
background-color: #2185C5;
height: auto;
margin: 0 auto;
min-height: 500px;
position: relative;
width: 800px;
 }
3
Atif Azad

Möglicherweise möchten Sie Folgendes: Demo

html ...

<div id="main_content">
<div id="container">vertical aligned text<br />some more text here
</div>
</div>

css ..

#main_content{
width: 500px; 
height: 500px; 
background: #2185C5; 
display: table-cell; 
text-align: center; 
vertical-align: middle; 
}
#container{
width: auto; 
height: auto; 
background: white; 
display: inline-block; 
padding: 10px;
}

Wie? >>> In einer Tabellenzelle wird die vertikale Ausrichtung mit der Mitte auf das Element vertikal zentriert gesetzt, und text-align: center; fungiert als horizontale Ausrichtung des Elements. Es wurde festgestellt, warum sich #container im Inline-Block befindet. Irgendeine Frage?

3

versuchen Sie, den position:relative;in Ihnen #container zu bekommen, fügen Sie #container die genaue Breite hinzu.

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width:600px;
    height: auto;
    margin:auto;
    padding: 10px;
}

arbeiten Demo

2
jhunlio

Hier ist eine neue Möglichkeit, Ihr Div einfach mit Hilfe der Flex-Anzeige zu zentrieren.

Sehen Sie sich diese Arbeitsgeige an: https://jsfiddle.net/5u0y5qL2/

Hier ist die CSS:

.layout-row{
box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.layout-align-center-center{
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-align-content: center;
  align-content: center;
      -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
2
Yann Thibodeau

Ich habe in einigen Projekten die folgende Methode verwendet

https://jsfiddle.net/u3Ln0hm4/

.cellcenterparent{
  width: 100%;
  height: 100%;
  display: table;
}

.cellcentercontent{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
2
Chandru

Dies liegt daran, dass Ihre Breite auf automatisch gesetzt ist. Sie müssen die Breite angeben, damit es sichtbar zentriert wird. Ihr #container erstreckt sich über die gesamte Breite des #main_content. Deshalb scheint es nicht zentriert zu sein,

1
Bogdan Rybak

Das wird gut funktionieren, denke ich, obwohl Sie "top: 200px" möglicherweise zurücksetzen müssen. je nach Bedarf--

#main_content {
top: 160px;
left: 160px;
width: 800px;
min-height: 500px;
height: auto;
background-color: #2185C5;
position: relative;
border:2px solid #cccccc;
}

#container {
width: 100px;
height: 20px;;
margin: 0 auto;
padding-top: 10px;
position: relative;
top:200px;
border:2px solid #cccccc;
}
1
Praveen Dabral
.parent {
width:500px;
height:200px;
border: 2px solid #000;
display: table-cell;
vertical-align: middle;
}
#kid {
width:70%; /* 70% of the parent*/
margin:auto;
border:2px solid #f00;
height: 70%;
}

Dies löst das Problem sehr gut (getestet in allen neuen Browsern), wobei das übergeordnete div die Klasse = "parent" und das untergeordnete div die ID = "kid" hat.

Dieser Stil zentriert sich sowohl horizontal als auch vertikal. Vertikales Zentrum kann nur mit komplizierten Tricks ausgeführt werden - oder indem die übergeordnete div-Funktion als Tabellenzelle ausgeführt wird. Dies ist eines der wenigen Elemente in HTML, das die vertikale Ausrichtung ordnungsgemäß unterstützt. Stellen Sie einfach die Höhe des Kindes, die Randmarge und die mittlere vertikale Ausrichtung ein, und es funktioniert. Es ist die einfachste Lösung, die ich kenne.

1
Joseph Myers

verwenden Sie margin:0 auto; für das untergeordnete div. Dann können Sie das untergeordnete div innerhalb des übergeordneten div zentrieren.

1

Wenn Sie width: auto für ein Blockelement festlegen, beträgt die Breite 100%. Daher macht der Wert von auto hier wirklich keinen Sinn. Wirklich das Gleiche für die Höhe, da standardmäßig jedes Element auf eine automatische Höhe eingestellt ist.

Schließlich ist Ihr div#container tatsächlich zentriert, nimmt aber nur die gesamte Breite des übergeordneten Elements ein. Wenn Sie die Zentrierung richtig ausführen, müssen Sie nur die Breite ändern (falls erforderlich), um zu sehen, dass sie wirklich zentriert ist. Wenn Sie Ihren #main_content zentrieren möchten, wenden Sie einfach margin: 0 auto; darauf an.

1
pzin

Machen Sie die CSS auf diese Weise ...

#main_content {
    top: 160px;
    left: 160px;
    width: auto;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
 }

#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px;
}

Arbeitsbeispiel hier -> http://jsfiddle.net/golchha21/mjT7t/

1
golchha21

jeder sagte es, aber ich denke, es wird nicht schaden, wenn man es noch einmal sagt. Sie müssen die width auf einen Wert setzen. hier ist etwas einfacher zu verstehen.

http://jsfiddle.net/XUxEC/

1
btevfik

Ohne die Einstellung der Variablen Width erhält sie die maximale Breite, die sie erhalten kann. Sie können also nicht sehen, dass Div zentriert ist. 

#container 
{
  width: 50%;
  height: auto;
  margin: auto;
  padding: 10px;
  position: relative;
  background-color:black;  /* Just to see the different*/
}
1
New Developer

probieren Sie diese Option aus, wenn dies die gewünschte Ausgabe ist:

<div id="main_content" >
<div id="container">
</div>
</div>

#main_content {
background-color: #2185C5;
margin: 0 auto;
}

#container {
width: 100px;
height: auto;
margin: 0 auto;
padding: 10px;
background: red;
}
1
nexus_07

Sie müssen dem Div, das Sie zentrieren möchten, eine Breite zuweisen.

So was:

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

Weitere Informationen und Beispiele zu diesen Links:

http://www.w3schools.com/css/css_align.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_align_container

1
AndreaRivadossi

wenn Sie keine Breite für #container festlegen möchten, fügen Sie einfach hinzu

text-align: center; 

zu #Hauptinhalt 

1
LRA
* {
  box-sizing: border-box;
}
#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 10px;
    position: absolute;
    border: 5px solid yellow;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}  
0
Yarbrough lu

ein Div in der Mitte machen. es ist nicht notwendig, die Breite des div zuzuweisen.

arbeitsdemo hier .. 

http://jsfiddle.net/6yukdmwq/

.container{width:100%; height:500px;display:table;border:1px solid red;text-align:center;}
.center{display:table-cell;vertical-align:middle;}
.content{display:inline-block;text-align:center; border:1px solid green;}



<section class="container">
    <div class="center">
        <div class="content">
            <h1>Helllo Center Text</h1>
        </div>
    </div>
</section>
0
Tauphik Ahamad