Ich habe eine div mit zwei Bildern und einem h1 . Alle müssen innerhalb des Divs vertikal nebeneinander ausgerichtet sein.
Eines der Bilder muss sein absolute positioniert innerhalb der div .
Welches CSS ist erforderlich, damit dies auf allen gängigen Browsern funktioniert?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Verwenden Sie einfach eine einzellige Tabelle innerhalb des div! Setzen Sie einfach die Zelle und Tabelle Höhe und mit auf 100% und Sie können die vertical-align verwenden.
Eine einzellige Tabelle innerhalb des Divs übernimmt die vertikale Ausrichtung und ist rückwärtskompatibel bis in die Steinzeit!
Bei mir hat es so funktioniert:
<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
<a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>Das "a"-Element wurde unter Verwendung von Bootstrap-Klassen in eine Schaltfläche umgewandelt und ist nun vertikal in einem äußeren "div" zentriert.
Dies ist meine persönliche Lösung für eine i Element innerhalb eines div .
<div class="circle">
<i class="fa fa-plus icon">
</i></div>.circle {
border-radius: 50%;
color: blue;
background-color: red;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
}
.icon {
font-size: 50px;
vertical-align: middle;
}
Ich verwende die folgende Lösung (ohne Positionierung und ohne Zeilenhöhe) seit über einem Jahr, sie funktioniert mit Internet Explorer 7 y Internet Explorer 8 auch.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
#style_center { position:relative; top:50%; left:50%; }
#style_center_absolute { position:absolute; top:50px; left:50px; }
<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
</style>
</head>
<body>
<div style="height:200px; width:200px; background:#00FF00">
<div id="style_center">+</div>
</div>
</body>
</html> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
23 Stimmen
Ich habe eine Liste mit allen Möglichkeiten der vertikalen Ausrichtung erstellt, die ich hier hinterlasse: jsfiddle.net/techsin/FAwku/1
3 Stimmen
Hier sind zwei einfache Methoden, um ein Element innerhalb eines div zu zentrieren, vertikal, horizontal oder beides (reines CSS): stackoverflow.com/a/31977476/3597276
1 Stimmen
Margin-top: auto und margin-bottom: auto (funktioniert in vielen Fällen).