Vertikal ausrichten von text in einem element mit einer prozentualen Höhe?

Wie ich ein element mit einem prozentualen Höhe kann ich nicht verwenden Sie die line-height hack. Hat jemand irgendwelche Ideen auf, wie man dieses Problem lösen?

<div height="100%">
    I want to be vertically aligned in the middle
</div>
  • Ein hervorragendes Beispiel dafür, wie lächerlich CSS ist
InformationsquelleAutor ChrisInCambo | 2009-06-29
  2. 1

    Müssen Sie die Höhe des div, dann setzen line-height: value_of_div_height. line-height 100% nicht funktionieren, weil es dauern wird mit dem Wert text, kein div-element. Es funktioniert mit oder ohne vertical-align, solange height=line-height

    div {
    height: 200px;
    line-height: 200px;
    display: block;
}

    Alternative Methode, wenn Sie wollen mit einem Absatz innerhalb eines div-Elements: http://www.w3.org/Style/Examples/007/center

    DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>
    • Das ist der Grund, warum er wahrscheinlich nicht wollen, dass die line-height hack, weil Sie sich auf eine Feste Höhe. Container height %Alter können für ein responsive design.
    InformationsquelleAutor lnguyen55
  3. 1

    Wenn Sie die schriftart,-Größe, und Sie wissen, die Anzahl der Textzeilen ein, die Sie haben.
    Sie können wickeln Sie den text in einem span. Und verwenden Sie die folgenden CSS auf die span.

    span {
    font-size:20px;
    margin-top:-10px; //half the font-size (or (font-size*number of lines)/2)
    position: relative;
    top: 50%;
}
    InformationsquelleAutor Jonathan.
Schreibe einen Kommentar