CSS : absolute Zentrierung positioniert text im Elternelement

Wie kann ich den center absolut positionierten text innerhalb des fluid Elternelement? Ich bin versucht zu verwenden text-align:center auf parent-Elemente, aber es ist immer Zentren des Kindes linken Ecke, die nicht element von sich selbst.

http://jsfiddle.net/sucTG/2/

  • Warum brauchen Sie die position:absolute; in Ihr .text-CSS-Klasse ? Ich habe gerade versucht zu entfernen, die Linie und der text ist richtig zentriert;
  • da gibt es relative Elemente in den Startlöchern und ich möchte den text nicht auf Ihre Positionierung und Anzeige auf der Oberseite von Ihnen.
  • Um etwas auf der Oberseite des anderen, Sie müssen nur die Positionierung, nicht absolut zwingend.
InformationsquelleAutor vlad | 2013-08-09
  1. 26

    Die Sache ist, dass position:absolute; ändert die Breite des Elements, um seine Inhalte, und dass text-align: center; zentriert den text innerhalb des Elements block breit. Also, wenn Sie fügen Sie eine position: absolute; vergessen Sie nicht, erhöhen Sie die Breite des Elements, oder sonst die text-align: center; Eigenschaft wird nutzlos sein.

    Der beste Weg, um dieses Problem zu lösen ist, um eine width: 100%; und ein left: 0px; im .text-Abschnitt.

    http://jsfiddle.net/27van/

    InformationsquelleAutor amaurymartiny
  2. 0

    Update: Was ich vorher war, schlecht/falsch

    http://jsfiddle.net/brJky/1/

    Diesem sollte VIEL näher an, was Sie wollen?

    Dein text ist relativ und die anderen Elemente im inneren des Behälters sind absolute!

    .text {
    color:#fff;
    padding:50px 0;
    display:block;
    position:relative;
}

.absolute {
    background:#f0f;
    height:25px; width:25px;
    position:absolute;
    top:36px; left:50%;
}
    InformationsquelleAutor Gary Kenyon
  3. 0

    Können Sie jetzt erreichen, was Sie wollen mehr elegant mit flex. Siehe zum Beispiel:

    HTML:

    <div class="container">
  <div class="text">Your text</div>
</div>

    CSS:

    .container {
  position: relative; 
  width: 400px; /** optional **/
  height: 400px; /** optional **/
  background-color: red; /** optional **/
}

.text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
}
    InformationsquelleAutor stray
Schreibe einen Kommentar