Wie man vertikale Elemente in einem div align?
https://stackoverflow.com/questions/79461
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe ein div mit zwei Bildern und einer h1. Alle von ihnen müssen vertikal innerhalb der div, nebeneinander ausgerichtet werden.
Eines der Bilder muss innerhalb des div positioniert werden absolute.
Was ist die CSS hierfür benötigte auf allen gängigen Browsern funktionieren?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Lösung
Wow, dieses Problem ist sehr beliebt. Es ist in der vertical-align Eigenschaft auf einem Missverständnis beruhen. In diesem Artikel wird erklärt, es:
vertical-align zu verstehen, oder "Wie (nicht) vertikal-Center Content" von Gavin Kistner.
„Wie in CSS zum Zentrum“ ist ein großes Web-Tool, das finden, hilft die notwendigen CSS Zentrierung Attribute für unterschiedliche Situationen.
Auf den Punkt gebracht (und Link Fäulnis zu verhindern) :
- Inline-Elemente (und nur Inline-Elemente) kann vertikal in ihrem Kontext über
vertical-align: middleausgerichtet werden. Doch der „Kontext“ ist nicht die ganze Mutterbehälterhöhe, es ist die Höhe der Textzeile in sie sind. jsfiddle Beispiel - Für Blockelemente, vertikale Ausrichtung ist härter und hängt stark von der jeweiligen Situation:
- Wenn das innere Element eine feste Höhe haben kann , können Sie seine Position
absolutemachen und seineheight,margin-topundtopPosition angeben. jsfiddle Beispiel - Wenn die zentrierte Element besteht aus einer einzigen Zeile und Mutterhöhe festgelegt ist können Sie einfach den Behälter
line-heighteingestellt seine Höhe zu füllen . Diese Methode ist sehr vielseitig in meiner Erfahrung. jsfiddle Beispiel - ... gibt es mehr solche Sonderfälle.
- Wenn das innere Element eine feste Höhe haben kann , können Sie seine Position
Andere Tipps
Nun, da Flexbox Unterstützung nimmt zu, diese CSS enthaltenden Element angewendet würde vertikal das enthaltene Element Zentrum:
.container {
display: flex;
align-items: center;
}
Mit dem Präfix Version, wenn Sie auch 10 Explorer zielen müssen, und alten (<4.4) Android-Browser:
.container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Ich habe diesen sehr einfachen Code:
HTML:
<div class="ext-box">
<div class="int-box">
<h2>Some txt</h2>
<p>bla bla bla</p>
</div>
</div>
CSS:
div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }
Offensichtlich, ob Sie eine .class oder eine #id verwenden, wird nicht das Ergebnis ändern.
Es funktioniert für mich:
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.outer {
display: flex;
align-items: center;
justify-content: center;
}
Eine Technik, von einem Freund von mir:
HTML:
<div style="height:100px; border:1px solid;">
<p style="border:1px dotted;">I'm vertically centered.</p>
</div>
CSS:
div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}
DEMO hier
Alle von ihnen müssen vertikal innerhalb des div ausgerichtet werden
Aligned wie ? Tops der Bilder mit dem oberen Rand des Textes ausgerichtet?
Eines der Bilder braucht absolute innerhalb des div positioniert werden.
Absolut relativ zu dem DIV? Vielleicht könnten Sie skizzieren, was Sie suchen ...?
fd die Schritte für die absolute Positionierung beschrieben hat, sowie die Anzeige des H1 Elements so eingestellt wird, dass Bilder mit inline es erscheinen wird. Um das zu, ich will hinzufügen, dass Sie die Bilder durch die Verwendung des vertical-align Stil ausrichten können:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
... dies würde den Header und Bilder zusammen mit Oberkanten ausgerichtet ist. Andere Ausrichtungsoptionen vorhanden sind; die Dokumentation . Sie können auch die DIV fällt es vorteilhaft finden und die Bilder im Innern des H1 Element bewegen - dies bietet semantischen Wert auf den Behälter, und beseitigt die Notwendigkeit, die Anzeige des H1 anzupassen:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Zur Position Blockelement zum Zentrum (Arbeiten in IE9 und höher), muss einen Wrapper div:
.vcontainer {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Mit dieser Formel, und es wird immer funktioniert ohne Risse:
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
Fast muss alle Methoden, um die Höhe spezifizieren, aber oft haben wir keine Höhen.
Hier ist also ein CSS3 3 line Trick, erfordert nicht die Höhe kennen.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Es unterstützt auch in IE9.
mit seinem Anbieter Präfix:
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Quelle: http://zerosixthree.se / vertical-align-alles-mit-nur-3-Linien-of-css /
Mein Trick ist, innerhalb des div eine Tabelle mit 1 Zeile und Spalte 1, stellte 100% der Breite und Höhe, und die Eigenschaft vertical-align zu setzen. Mitte
<div>
<table style="width:100%; height:100%;">
<tr>
<td style="vertical-align:middle;">
BUTTON TEXT
</td>
</tr>
</table>
</div>
h1 Standardmäßig ist ein Blockelement und wird auf der Linie nach dem ersten img machen, und wird die zweite img auf der Zeile nach dem Block erscheinen verursachen.
Um dies zu verhindern, auftreten Sie die h1 einstellen Inline-Strömungsverhalten haben:
#header > h1 { display: inline; }
Wie für absolut img Positionierung innerhalb der div , müssen Sie die enthalten div zur Einrichtung einer „bekannte Größe“ zu haben, bevor diese richtig funktionieren. Nach meiner Erfahrung, müssen Sie auch die Position weg von dem Standardattribut ändern - Position: für mich relativ Werke:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Wenn Sie, dass an der Arbeit bekommen können, Sie könnten schrittweise versuchen wollen Entfernen der Höhe, Breite, Position von div.header Attributen der minimal erforderlichen Attribute zu bekommen um den gewünschten Effekt zu erhalten.
UPDATE:
Hier ist ein vollständiges Beispiel, das auf Firefox funktioniert 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
Mit CSS zu vertikaler Mitte, können Sie die äußeren Container wie ein Tisch wirken lassen und den Inhalt als eine Tabellenzelle. In diesem Format wird bleiben Ihre Objekte zentriert. :)
I verschachtelt mehrere Objekte in JSFiddle für ein Beispiel, aber der Kerngedanke ist wie folgt:
HTML
<div class="circle">
<div class="content">
Some text
</div>
</div>
CSS
.circle {
/* act as a table so we can center vertically its child */
display: table;
/* set dimensions */
height: 200px;
width: 200px;
/* horizontal center text */
text-align: center;
/* create a red circle */
border-radius: 100%;
background: red;
}
.content {
/* act as a table cell */
display: table-cell;
/* and now we can vertically center! */
vertical-align: middle;
/* some basic markup */
font-size: 30px;
font-weight: bold;
color: white;
}
Das mehr Objekte Beispiel:
HTML
<div class="container">
<div class="content">
<div class="centerhoriz">
<div class="circle">
<div class="content">
Some text
</div><!-- content -->
</div><!-- circle -->
<div class="square">
<div class="content">
<div id="smallcircle"></div>
</div><!-- content -->
</div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content -->
</div><!-- container -->
CSS
.container {
display: table;
height: 500px;
width: 300px;
text-align: center;
background: lightblue;
}
.centerhoriz {
display: inline-block;
}
.circle {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: red;
border-radius: 100%;
margin: 10px;
}
.square {
display: table;
height: 200px;
width: 200px;
text-align: center;
background: blue;
margin: 10px;
}
.content {
display: table-cell;
vertical-align: middle;
font-size: 30px;
font-weight: bold;
color: white;
}
#smallcircle {
display: inline-block;
height: 50px;
width: 50px;
background: green;
border-radius: 100%;
}
Ergebnis
Wir können eine CSS-Funktion Berechnung verwenden, um die Größe des Elements zu berechnen und dann entsprechend das untergeordnete Element positionieren.
Beispiel HTML:
<div class="box">
<span><a href="#">Some Text</a></span>
</div>
Und CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}
Demo erstellt hier: https://jsfiddle.net/xnjq1t22/
Diese Lösung funktioniert gut mit ansprechenden div height und width auch.
. Hinweis: Die Calc-Funktion nicht für Kompatibilität mit älteren Browsern getestet
Wie pro heute, ich habe eine neue Abhilfe gefunden vertikal mehrere Textzeilen in einem div mit CSS3 ausrichten (und ich bin auch Bootstrap v3 Grid-System über die Benutzeroberfläche zu verschönern), die als unten:
.immediate-parent-of-text-containing-div{
height: 50px; /* or any fixed height that suits you.*/
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
}
Wie pro mein Verständnis, unmittelbar übergeordnete Text enthält Element muss eine gewisse Höhe aufweisen. Ich hoffe, es wird Ihnen auch helfen. Dank!
Es gibt zwei Möglichkeiten Elemente vertikal und horizontal
auszurichten 
1. Bootstrap 4.3.X
für die vertikale Ausrichtung: d-flex align-items-center
für die horizontale Ausrichtung: d-flex justify-content-center
.container {
height: 180px;
width:100%;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center bg-info container">
<div class="bg-light p-2">I am in Center</div>
</div>
2. CSS3
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: #17a2b8;
height: 180px;
width:100%;
}
.child {
background-color: #f8f9fa;
padding: 0.5rem;
}<div class="container">
<div class="child">I am in Center</div>
</div>
Verwenden Sie einfach eine Ein-Zellen-Tabelle innerhalb des div! Stellen Sie einfach die Zelle und Tischhöhe und mit bis zu 100% und Sie können den vertical-align verwenden.
Eine Ein-Zellen-Tabelle innerhalb des div nimmt das vertical-align und ist rückwärtskompatibel zurück in die Steinzeit!
Ich habe die folgende Lösung wurde unter Verwendung von (ohne Positionierung und ohne Zeilenhöhe) seit mehr als ein Jahr, es funktioniert mit IE 7 und 8 als 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>
Dies ist meine persönliche Lösung für ein i-Element innerhalb eines div
HTML
<div class="circle">
<i class="fa fa-plus icon">
</i></div>
CSS
.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;
}
Für mich ist es auf diese Weise gearbeitet:
<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 auf eine Schaltfläche konvertiert, Bootstrap-Klassen, und es nun vertikal innerhalb einer äußeren „div“ zentriert ist.
<div class="outdiv">
<div class="indiv">
<span>test1</span>
<span>test2</span>
</div>
</div>
.outdiv {
display: flex;
justify-content:center;
align-items:center;
}
Nur soviel:
<div>
<table style="width: 100%; height: 100%">
<tr>
<td style="width: 100%; height: 100%; vertical-align: middle;">
What ever you want vertically-aligned
</td>
</tr>
</table>
</div>
Eine Ein-Zellen-Tabelle innerhalb des div nimmt das vertical-align und ist rückwärtskompatibel zurück in die Steinzeit!
<!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>
Hier ist nur ein weiterer (reaktions) Ansatz:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.table {
display: table;
width: auto;
table-layout:auto;
height: 100%;
}
.table:nth-child(even) {
background: #a9edc3;
}
.table:nth-child(odd) {
background: #eda9ce;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
width: 50%;
vertical-align: middle;
}
Ich bin ein .NET-Typ, der nur in Web-Programmierung bekommt. Ich habe verwenden CSS nicht (na ja, ein wenig). Ich habe ein wenig JavaScript vertikale Zentrierung zu erreichen zusammen mit jQuery CSS-Funktion.
Ich poste einfach alles von meinem Test. Es ist wahrscheinlich nicht allzu elegant, aber es funktioniert so weit.
script.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="application/javascript">
function centerElementVertically(id) {
var btnDivHeight = $(id).outerHeight();
var prnt = $(id).parent();
var parentHeight = prnt.outerHeight();
var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
var newPct = newTop / parentHeight+'%;';
$(id).css({top: newTop});
}
function showAlert(){
alert("alert");
}
$(window).load(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
});
$(window).resize(()=>{
centerElementVertically('#buttonRight');
centerElementVertically('#buttonLeft');
centerElementVertically('#testerbtn')
})
</script>
<style>
#div1 {
position:relative;
height: 33%;
background-color: red;
overflow: hidden;
}
#buttonLeft {
position: relative;
float:left;
width:50%;
height:20%;
background-color: cornsilk;
}
#buttonRight {
position: relative;
float:right;
width:50%;
height:50%;
background-color: darkorchid;
}
#testerbtn {
position: absolute;
}
body {
background-color: aqua;
}
</style>
<body>
<div id="div1">
<div id="buttonLeft">
<button id="testerbtn">tester</button>
</div>
<div id="buttonRight"></div>
</div>
</body>
</head>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
oder CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}
