it-swarm.com.de

Wie kann man Divs vertikal zentrieren?

Ich versuche, ein kleines Eingabefeld für Benutzername und Kennwort zu erstellen.

Ich möchte fragen, wie man ein div vertikal ausrichtet?

Was ich habe, ist:

<div id="Login" class="BlackStrip floatright">
   <div id="Username" class="floatleft">Username<br>Password</div>
   <div id="Form" class="floatleft">
   <form action="" method="post">
      <input type="text" border="0"><br>
      <input type="password" border="0">
   </form>
   </div>
</div>

Wie kann ich das div mit id Username und Form so einstellen, dass es sich vertikal zur Mitte ausrichtet? Ich habe versucht zu setzen:

vertical-align: middle;

in CSS für das div mit id Login, aber es scheint nicht zu funktionieren. Jede Hilfe wäre dankbar.

105
Crays

Der beste Ansatz in modernen Browsern ist die Verwendung von Flexbox:

#Login {
    display: flex;
    align-items: center;
}

Einige Browser benötigen Herstellerpräfixe. Bei älteren Browsern ohne Flexbox-Unterstützung (z. B. IE 9 und niedriger) müssen Sie eine Fallback-Lösung mit einer der ältere Methoden implementieren.

Literatur-Empfehlungen

196
Andy E

Dies kann mit 3 Zeilen CSS erfolgen und ist kompatibel zu (und einschließlich) IE9:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Beispiel: http://jsfiddle.net/cas07zq8/

Kredit

82
patmood

Sie können ein Div in einem anderen Div vertikal ausrichten. Siehe dieses Beispiel auf JSFiddle oder betrachten Sie das Beispiel unten.

HTML

<div class="outerDiv">
    <div class="innerDiv"> My Vertical Div </div>
</div>

CSS

.outerDiv {
    display: inline-flex;  // <-- This is responsible for vertical alignment
    height: 400px;
    background-color: red;
    color: white;
}

.innerDiv {
    margin: auto 5px;   // <-- This is responsible for vertical alignment
    background-color: green;   
}

Der Rand des .innerDiv muss in diesem Format sein: margin: auto *px; 

[Wobei * der gewünschte Wert ist.]

display: inline-flex wird in den neuesten Browsern (aktualisierte/aktuelle Version) mit HTML5-Unterstützung unterstützt. 

Möglicherweise funktioniert es nicht in Internet Explorer: P :)

Versuchen Sie immer, eine Höhe für ein vertikal ausgerichtetes div (d. H. InnerDiv) zu definieren, um Kompatibilitätsproblemen entgegenzuwirken.

75
Lalit Kumar

Ich bin ziemlich spät auf der Party, aber ich habe mir das selbst ausgedacht und es ist einer meiner bevorzugten schnellen Hacks für die vertikale Ausrichtung. Es ist verrückt einfach und leicht zu verstehen, was los ist.

Sie verwenden das :before css-Attribut, um ein div am Anfang des übergeordneten div einzufügen, geben Sie ihm display:inline-block und vertical-align:middle und geben Sie dem untergeordneten div diese Eigenschaften. Da vertical-align für die Ausrichtung entlang einer Linie vorgesehen ist, werden diese Inline-Divs als Linie betrachtet.

Machen Sie den :before div height:100%, und das untergeordnete div wird automatisch in der Mitte einer sehr großen "Linie" ausgerichtet und ausgerichtet.

.parent:before, .child {
    display:inline-block;
    vertical-align:middle;
}
.parent:before {
    content:""; // so that it shows up
    height:100%; // so it takes up the full height
}

Hier ist eine Geige um zu zeigen, worüber ich spreche. Das untergeordnete div kann eine beliebige Höhe haben, und Sie müssen niemals seine Ränder/Auffüllungen ändern.
Und hier ist eine erklärende Geige .

Wenn Sie :before nicht mögen, können Sie das Div immer manuell eingeben.

<div class="parent">
    <div class="before"></div>
    <div class="child">
        content
    </div>
</div>

Und dann .parent:before nur noch .parent .before zuweisen

13
Overcode

Wenn Sie die Höhe kennen, können Sie die absolute Positionierung mit einem negativen margin-top wie folgt verwenden:

#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}

Ansonsten gibt es keine echte Möglichkeit, ein div nur mit CSS vertikal zu zentrieren

12

@ GáborNagys Kommentar zu ein weiterer Beitrag war die einfachste Lösung, die ich finden konnte und funktionierte für mich wie ein Zauber, da er ein jsfiddle mitbrachte. Ich kopiere es hier mit einer kleinen Ergänzung:

CSS:

#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

Wenn Sie es auch horizontal ausrichten möchten, müssen Sie ein weiteres div "innere Zelle" innerhalb des "cell" -divs hinzufügen und diesem Stil zuweisen:

#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}
3
BornToCode

Ich fand diese Site nützlich: http://www.vanseodesign.com/css/vertical-centering/ Dies funktionierte für mich:

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}
3
testpattern

In meinem Firefox und Chrom funktionieren dies: 

CSS: 

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align
2
Kamil Kot

Ich musste die Mindesthöhe angeben

#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em
1
Harry Bosh

http://jsfiddle.net/dvL512e7/

Wenn das ausgerichtete div keine feste Höhe hat, versuchen Sie es mit folgendem CSS für das ausgerichtete div:

{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}
1
grebenyuksv

Das vertikale Ausrichten war schon immer schwierig.

Hier habe ich eine Methode zum vertikalen Ausrichten eines Divs verdeckt.

http://jsfiddle.net/3puHE/

HTML:

<div style="display:flex;">

<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>

<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>

<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>

<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>

</div>

CSS:

em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
1
Barun

Ich habe einen Weg gefunden, der für mich gut funktioniert. Das nächste Skript fügt ein unsichtbares Bild (wie bgcolor oder ein transparentes gif) mit einer Höhe ein, die der Hälfte der Leerstelle auf dem Bildschirm entspricht. Der Effekt ist eine perfekte vertikale Ausrichtung. 

Angenommen, Sie haben eine Kopfzeile div (height = 100) und eine Fußzeile div (height = 50) und der Inhalt im Hauptdiv, den Sie ausrichten möchten, hat eine Höhe von 300: 

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>"); 
</script>   

Sie platzieren das Skript direkt vor dem Inhalt, den Sie ausrichten möchten!

In meinem Fall war der Inhalt, den ich ausrichten wollte, ein Bild (Breite = 95%) mit einem Seitenverhältnis von 100: 85 (Breite: Höhe). Die Höhe des Bildes beträgt 85% der Breite. Und die Breite beträgt 95% der Bildschirmbreite.

Ich habe deshalb verwendet:

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

Kombinieren Sie dieses Skript mit

<body onResize="window.location.href = window.location.href;">

und Sie haben eine glatte vertikale Ausrichtung.

Ich hoffe, das funktioniert auch für Sie!

0
decaff

wenn Sie eine feste Höhe div verwenden, können Sie je nach Ihren Konstruktionsanforderungen eine Polsterauflage verwenden. oder. Sie können auch top: 50% verwenden. Wenn wir div als vertikal verwenden, funktioniert dies nicht. Daher verwenden wir die Polsterauflage oder die Position entsprechend dem Bedarf.

0

die einfachste Möglichkeit, Ihr div-Element zu zentrieren, besteht darin, diese Klasse mit den folgenden Eigenschaften zu verwenden.

.light {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
0
parag patel

Zentrieren der untergeordneten Elemente in einem div. Es funktioniert für alle Bildschirmgrößen

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

<div id="parent">
    <div id="child">Content here</div>
</div>

für weitere Informationen besuchen Sie diesen link

0
WasiF