Center div in einem anderen

Question

Ich habe Probleme beim Zentrieren des Inhalts eines div innerhalb eines anderen, weil der Inhalt nicht angezeigt wird.

#searchbkg { 
 
    postition: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
} 
 
#searchcentre { 
 
    position: absolute; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">Test</div> 
 
</div>

Die grüne Box erscheint, aber es gibt keinen Text im Inneren.

Answer 1

Ihr Text erscheint gut, aber es wird nicht zentriert, weil Sie position: absolute; auf der Innenseite div haben. Ändern Sie es in position: relative; und es wird horizontal zentriert. Wenn Sie möchten, dass der Text im div zentriert ist, können Sie auch eine text-align: center; anwenden.

#searchbkg { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
} 
 
#searchcentre { 
 
    position: relative; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    border: 1px solid red; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">This is a centered div!</div> 
 
</div>

Answer 2

Sie müssen folgende drei Änderungen vornehmen, um Ihre Inhalte in der Mitte zu machen;

1. Sie haben Tippfehler in einer CSS-Eigenschaft innerhalb von Stilen #searchbkg. Es gibt postition, während es position sein sollte.
2. Entfernen position: absolute von #searchcentre, wenn nicht benötigt (absolute Positionierung sollte nur verwendet werden, wenn Sie ein Element über ein anderes legen möchten).
3. Hinzufügen text-align: center in #searchcentre.

#searchbkg{ 
 
    position: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
} 
 

 
#searchcentre{ 
 
    text-align: center; 
 
    background: orange; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">Test</div> 
 
</div>

Answer 3

versuchen Sie dies:

#searchbkg{ 
 
    postition: relative; 
 
    width: 100%; 
 
    height: 700px; 
 
    background-color: #85e085; 
 
    text-align:center; 
 
} 
 

 
#searchcentre{ 
 
    display: inline-block; 
 
    width: 50%; 
 
}

<div id="searchbkg"> 
 
    <div id="searchcentre">Test</div> 
 
    </div>