Alignement vertical des divs

Question

J'essaie de créer une petite zone de saisie du nom d'utilisateur et du mot de passe. Je voudrais demander comment alignez-vous verticalement un div?

Ce que j'ai est un

 <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>
 

et comment puis-je faire en sorte que la div avec id Username et Form s'aligne verticalement sur le centre? J'ai essayé de mettre

 vertical-align: middle;
 

en css pour la div avec l'identifiant de connexion. Mais ne semble pas fonctionner. Toute aide serait appréciée. Merci.

Answer 1

J'ai eu un peu de difficulté à le faire dans le passé. Ce grand site (que j'ai trouvé de nouveau par la recherche) m'a aidé à travers elle:

Le problème ici est triple:

1. HTML mise en page, traditionnellement, n'a pas été conçu pour spécifier verticale comportement. De par sa nature même, elle échelles de largeur, et le contenu des flux à une hauteur appropriée en fonction de la largeur disponible. Traditionnellement, horizontal dimensionnement et la mise en page est facile; vertical de dimensionnement et de mise en page a été dérivée à partir de cela.
2. La raison vertical-align:middle n'est pas ce qui est souhaité voulez, c'est parce que l'auteur ne comprend pas ce qu'il est censé faire, mais ...
3. ... c'est parce que la spécification CSS vraiment vissé celui-ci (à mon avis)-vertical-align est utilisé pour spécifier deux comportements différents selon l'endroit où il est utilisé.

Les solutions dépendent de la mise en page souhaitée de votre contenant de l'élément. Par exemple, si vous connaissez les dimensions verticales de l'élément que vous souhaitez center, vous pouvez définir sa position verticale à 50% et ensuite utiliser une marge négative de la moitié de la hauteur de la compenser.

Si vous vous attendez à ce que le contenu soit sur une seule ligne, sans emballage, vous pouvez définir l' line-height de la propriété à la même hauteur du conteneur et le contenu sera automatiquement aligné verticalement.

La compréhension vertical-align, ou "Comment (ne Pas) à la Verticale du Centre de Contenu"

Answer 2

Vous pouvez aligner verticalement un div dans d'autres div. Pour cela, vous devez définir css comme ceci exemple sur le violon. Viens de voir la petite démonstration que alignez verticalement un innerDiv dans outerDiv.

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;   
}

.innerDiv classe de marge doit être comme margin: auto *px;

[* peut être la valeur souhaitée.]

display: inline-flex propriété est prise en charge la plus récente(mise à jour/versions actuelles) les navigateurs, avec prise en charge du HTML5.

Toujours essayer de définir la hauteur de la verticale aligner div (c'est à dire innerDiv) pour tout autre problème de compatibilité.

Answer 3

Si vous connaissez la hauteur, vous pouvez utiliser le positionnement absolu avec un margin-top négatif comme ceci:

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

Sinon, il n'y a pas vraiment de moyen de centrer verticalement un div avec juste du CSS

Answer 4

J'ai trouvé ce site utile: http://www.vanseodesign.com/css/vertical-centering/ Cela a fonctionné pour moi:

HTML

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

CSS

 #parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}
 

Answer 5

L'alignement vertical a toujours été délicat.

Ici, j'ai couvert une méthode d'alignement vertical d'un div.

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;}