Vertikal-center-zwei Elemente in einem div
Ich versuche zu vertikal-center zwei <p>
Elemente.
Ich folgte das tutorial auf phrogz.net aber immer noch die Elemente, die sich oben das div, unterhalb des div, nach oben ausgerichtet in die div.
Ich würde versuchen etwas anderes, aber die meisten der Fragen, die hier nur zu verweisen, tutorial.
Dieses snippet ist für ein banner, das auf der Spitze einer web-Seite.
CSS:
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}
HTML:
<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p>
<p>vertically centered</p>
</div>
</div>
<div class="clear">
</div>
</div>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie den folgenden:
display:table; zu bannerRight
display:table-cell; und
vertical-align:middle; zu bannerrightinner
Ich habe nicht versucht, diese, bitte geben Sie mir feedback, wenn es nicht funktioniert. 😉
EDIT: vergessen zu erwähnen: nehmen Sie 'float' und 'position' - Eigenschaften aus
, Wie Center-Elemente Vertikal, Horizontal oder Beides
Hier sind zwei Wege center-divs in divs.
Einer Weise verwendet CSS Flexbox und auf der anderen Seite nutzt CSS Tabelle und Positionierung Eigenschaften.
In beiden Fällen die Höhe des divs zentriert werden kann, variabel, undefiniert, unbekannt, was auch immer. Die Höhe des zentrierten divs spielt keine Rolle.
Hier ist der HTML-Code für beide:
CSS-Flexbox-Methode
DEMO
Den beiden Kind-Elemente (
.box
) werden vertikal ausgerichtet mitflex-direction: column
. Für die horizontale Ausrichtung, schalten Sie denflex-direction
zurow
(oder entfernen Sie einfach die Regel alsflex-direction: row
ist die Standardeinstellung). Die Elemente bleiben wird vertikal zentriert und horizontal (DEMO).CSS Tabelle-Positionierung und Methode
DEMO
, Welche Methode zu verwenden...
Wenn Sie nicht sicher sind, welche Methode zu verwenden, würde ich empfehlen flexbox-aus diesen Gründen:
Browser-Unterstützung
Flexbox-unterstützt durch alle gängigen Browser, außer IE < 10. Einige der neuesten Versionen der browser, wie Safari 8 und IE10, erfordern vendor-Präfixe. Für eine schnelle Methode zum hinzufügen von Präfixen verwenden Autoprefixer. Mehr details in diese Antwort.