Wie vertikale Elemente ausrichten cross-browser?

Bin ich dabei die vertikale Ausrichtung mit vertical-align: middle Grundstück seiner arbeiten in Chrome, aber nicht im IE.

Welche version von IE? Kannst du die relevanten HTML-und CSS-code?
.login_sign_up_text_box_td { font:Arial, Helvetica, sans-serif; font-size:18px; color:#000; vertical-align:middle; height:40px; width:200px; } ich bin ujsing IE 7
Gibt es irgendeine andere CSS-Eigenschaften im stylesheet, die in Konflikt mit dieser Eigenschaft?
Ohne das komplette markup oder einen link, alles, was wir sagen, ist nur eine wilde Vermutung.

InformationsquelleAutor subash | 2010-12-13

  1. 0

    Angeblich, IE8+ unterstützt vertical-align aber IE7 - Unterstützung fehlerhaft ist. Für ältere Browser, möchten Sie vielleicht versuchen Sie, das element im container CSS zu top: 50% oder top: -50%.

    Es wäre schön, wenn drive-by-down-Wähler würde einen Kommentar hinterlassen und erklären sich selbst.

    InformationsquelleAutor Donald Taylor

  2. -3

    Wenn Sie möchten, eine Zeile text, zum Beispiel eine header-Titel in Ihrer box, als Sie mit line-height

    Beispielsweise mit 200px Breite und 40px Höhe box:

    .the_box{
width: 200px;
height: 40px;
line-height: 40px;
}

    Es ist einfach, elegant, und cross-browser. Wenn Sie mehr text als 200px, funktioniert diese Methode nicht.

    InformationsquelleAutor wintercounter

  3. -3

    Einfach Folgendes hinzufügen:
    display: table-cell;

    InformationsquelleAutor Vla

  4. -4

    Setzen 

    style="valign:middle; vertical-align:middle;"

    Neueren Versionen von IE Holen valign:middle und ignorieren vertical-align:middle.

    Alle anderen Browser wie Firefox, Chrome, Safari, usw. Holen vertical-align:middle und ignorieren valign:middle.

    InformationsquelleAutor aman.kejriwal

  5. -4

    Ich hatte auch dieses problem, mit einem Kalender-Tabelle ein Kollege von mir erstellt. Der Kalender eingesehen schön in Chrome, Firefox, aber das Datum text war halb abgeschnitten in der linken oberen Ecke eines jeden Tages. Ich entfernte die vertical-alignment-Eigenschaft und ersetzt es mit position. Siehe unten.

    Original-CSS:

    .dayText {
    vertical-align: text-bottom;
}

    Meine CSS-Update:

    .dayText {
    position: relative;
    top: 10px;
    left: 0px;
    height: inherit; 
}

    InformationsquelleAutor Rob Watt

  6. -5

    Ich hatte ein ähnliches problem

    Hatte ich folgende 

    <div>
  <span> some text </span>
</div>

    War das alles in einen header in einer Tabelle.

    War ich in der Lage zu bekommen, um dieses Problem durch hinzufügen des folgenden in die span

    <div>
  <span style="position: absolute; padding-top:1px;"> some text </span>
</div>

    InformationsquelleAutor nate_weldon

Schreibe einen Kommentar