Ich baue gerade meine Website von einem Tabellenlayout zu CSS um. Ich habe einige Probleme mit scheinbar einfachen Aufgaben.
Die Seite ist einfach. Eine Box in der Mitte des Bildschirms, die mehrere Links enthält.
Die alte Site verwendete <td valign="center"> , um alle Links in der Box zu zentrieren. CSS scheint kein Äquivalent zu haben. Ich habe Elemente mit negativen Rändern wie folgt zentriert:
Das funktioniert gut, wenn Sie genau wissen, wie groß das Element ist, das Sie zentrieren, aber ich muss in der Lage sein, die Links zu zentrieren, ohne zu wissen, wie viel vertikale Größe die Links einnehmen. Ich möchte nur die Ausrichtung in der Box wie text-align: center handeln. Nur vertikal.
Aktuelle Website mit Tabellen
Aktueller Fortschritt in der CSS-Version
Ich war auf Ihrer Website und kopierte die HTML hier.
Sie können dies tun:
%Vor% Sie müssen ein div -Element in #box umbrechen, weil display: table-cell -Eigenschaft nicht ordnungsgemäß funktioniert, wenn Sie kein Wrapper-Element haben, das auf display: table festgelegt ist.
Ihr Beispiel hier: jsfiddle
Sie haben 4, möglicherweise 5 Lösungen, die am unteren Rand hinzugefügt werden, da es sich um eine Kombination verschiedener CSS von Ihrem Original und js handelt, um die Höhe einzustellen:
display: table-cell; vertical-align: middle; als CSS für dein div Einfaches Beispiel mit Flexbox im alten Stil - Chrome-Version - fügen Sie ein Wrapper-Div hinzu und legen Sie das Styling so fest:
%Vor%Geige für diese Ссылка
Neue Stil-Flexbox - auch Chrome-Version, Sie müssen die anderen Anbieter-Präfixe sowie die Version ohne Präfixe im Endprodukt hinzufügen.
%Vor%Geige dafür: Ссылка
Die fiddles enthalten ein paar mehr CSS-Eigenschaften, so dass Sie sehen können, was einfach passiert.
Oh, tut mir leid, du brauchst das Wrapper div nicht, du kannst einfach jeden Inhalt mit flexbox vertikal zentrieren ... naja, trotzdem kann die vorgeschlagene Lösung mit display: table-cell; kombiniert werden, so dass es auch in älteren Browsern funktioniert .
Sie können auch die absolute Positionierung mit der angegebenen Höhe verwenden jsfiddle.net/N28AU/
%Vor%Sie können die Höhe aus den enthaltenen Elementen berechnen und sie über js aktualisieren, wenn Sie negative Ränder vermeiden möchten.