1. Lieber Benutzer,

    Du musst bei uns registriert sein, um an den Diskussionen teilzunehmen. Melde dich jetzt an - kostenfrei und unverbindlich. Und stelle Deine eigenen Fragen oder gib uns hilfreiche Antworten

vertical-align: middle; & position:absolute;

Dieses Thema im Forum "CSS" wurde erstellt von Kazel, 13 August 2013.

  1. Kazel

    Kazel Neues Mitglied

    Registriert seit:
    30 Januar 2013
    Beiträge:
    17
    Punkte für Erfolge:
    1
    Sehr geehrte HTML Community,

    ich habe ein Problem und meine Vermutung ist,
    dass sich vertical-align middle & position absolute nicht so super verstehen,
    weil ich einen Container gebaut habe, 300x300 px, dieser hat nen Background
    und beinhaltet einen Text. Mein Ziel ist es, dass der Text "mittig mittig" ist,
    sprich, vertical und horizntal in der Mitte gesetzt. Was problemlos funktioniert,
    doch sobald ich den Contrainer positionieren will, wirkt das vertical-align:middle; nicht mehr,
    sobald ich aber position:absolute; lösche, ist der Text wieder mittig.

    Hier mein CSS:
    Code (text):
    1. .container {
    2.     position:absolute;
    3.     left:10%;
    4.     top:10%;
    5.     height:    300px;
    6.     width:300px;
    7.     text-align:center;
    8.     display:table-cell;
    9.     vertical-align:    middle;
    10.     background-color:#F00;
    11. }
    Ich könnte zwar auch Margin-left benutzen, doch würde es mich trotzdem interessieren,
    wieso das mit position absolute nicht funktioniert.

    Edit: Na gut, mit margin-left tut ers auch nicht...

    LG,
    Kazel
     
    Werbung: Jetzt registrieren, damit diese Werbung verschwindet
  2. Banana_Jones

    Banana_Jones Aktives Mitglied

    Registriert seit:
    22 Juli 2012
    Beiträge:
    587
    Punkte für Erfolge:
    28
    Deine Vermutung geht in die richtige Richtung, allerdings einen Schritt zu wenig. Das Problem liegt in der Kombination von display: table-cell und einer Positionierung. Dies verträgt sich im Firefox bspw. nicht. (Chrome hat da soweit ich mich erinnern kann keine Probleme)
     
  3. djheke

    djheke Mitglied

    Registriert seit:
    8 Februar 2012
    Beiträge:
    420
    Punkte für Erfolge:
    18
    Versuchs mal so:
    Code (text):
    1.  
    2. .container {
    3.  margin:10%;
    4. }
    5.  
    6. .container span {
    7.     height:300px;
    8.     width:300px;
    9.     display:table-cell;
    10.     text-align:center;
    11.     vertical-align:middle;
    12.     background-color:#F00;
    13. }
    14.  
    15.  
    Code (text):
    1.  
    2.  <div class="container"><span>text</span> </div>
    3.  
     
    Zuletzt bearbeitet: 13 August 2013

Diese Seite empfehlen