CSS vertical align

J'ai une img en div flottant et je ne sais pas comment faire pour centrer verticalement.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align: middle bien sûr ne fonctionne pas.

http://jsfiddle.net/wKQYj/

Les deux façons mentionne cet article ont été donnés déjà comme distincts des réponses, mais vous serait mieux CSSer si vous saviez ce que vertical-align a été effectivement utilisée pour: phrogz.net/css/vertical-align
C'est un bon lien. Cependant, je ne voudrais pas utiliser display:table-cell. Bien sûr, je ne voudrais pas utiliser ma proposition de réponse de <table>. Ha.
pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg

OriginalL'auteur anonymous | 2011-01-24

15

À la verticale-aligner le texte à l'intérieur d'un élément parent, et de garder à l'esprit qu'une img est un inline-élément et donc se comporte de même de texte, vous pouvez simplement définir le line-height à la height de l'élément parent:
```
div {
    height: 300px;
    line-height: 300px;
}
```
JS Fiddle démo.

OriginalL'auteur David Thomas
11

La vertical-align de style CSS spécifie l'alignement du texte dans son texte à la ligne. Cela vous permet de spécifier un texte en exposant ou en indice, par exemple.

De sorte qu'il n'est pas réellement destiné à aligner verticalement un élément à l'intérieur d'une boîte.

Il y a une exception explicite à ceci, cependant -- les cellules d'un tableau (c'est à dire <td> et <th> éléments) utiliser le vertical-align style à faire exactement cela: aligner le contenu de la cellule à l'intérieur de la cellule.

Cette exception est quelque chose d'un caprice, ça ne devrait pas exister. Le CSS concepteurs de mettre en là pour permettre CSS pour reproduire le valign attribut des éléments du tableau, qui a été couramment utilisé par les concepteurs dans le noir-les vieux jours des tableaux de présentation.

Pour les autres éléments, en alignant le contenu d'une case verticalement dans le milieu de l'informatique peut être un peu d'un des beaux-arts. Il existe plusieurs techniques:
1. Pour de simples lignes de texte, il suffit de faire les line-height la même que la hauteur de l'ensemble de la zone. Vous n'aurez probablement même pas besoin de vertical-align pour cela.
2. Utilisation display:table-cell; de rendre l'élément de simuler une cellule de tableau, et ensuite utiliser vertical-align. Cela fonctionne, mais peut avoir des conséquences inattendues (il y a d'autres attributs de la table de cellules que vous ne voulez pas à simuler).
3. Si vous connaissez la hauteur de l'élément que vous souhaitez alignées à la verticale, vous pouvez le positionner à 50%, moins de la moitié de sa hauteur, comme ceci:
```
position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */
```
Il y a quelques autres, mais ceux-ci devraient vous aider à démarrer.

Espère que ça aide.

OriginalL'auteur Spudley

Plus moderne (IE8+) solution qui n'utilise pas de tableaux, j'aime cette une meilleur.

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

Meilleure solution en effet, puisqu'il n'a pas besoin de connaître la hauteur du contenu et de ne pas utiliser de table-cell css. Merci pour le partage!
+1 astuce! Ce doit être la accepté de répondre à l'OMI.
est-il un moyen de le faire tout en ayant .centré être un pour cent de la largeur (qui est en fait de 100%).

OriginalL'auteur Justin

3

vertical-align propriété n'est vraiment bon sur td éléments. Essayez quelque chose comme:
```
<table>
 <tr>
  <td style='height:300px; vertical-align:center'>
   <img src='something'>
  </td>
 </tr>
</table>
```
OU puisque vous savez que la hauteur et la largeur de la img:
```
<div style='height:300px;'>
 <img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>
```
ZOMG, rien de ce qui précède semble ok pour moi, je veux dire il y a de sérieux trou dans le css, ils sont en développement, les ombres, etc et nous avons l'utilisation de tables ou encore à divs dans les divs pour centrer verticalement... vache sacrée. J'ai utiliser des divs. Et je ne peux pas utiliser le deuxième code, car la div hauteur va être changé par l'utilisateur. Donc je suis perdu.
êtes-vous en mesure d'utiliser le JavaScript, ou toutes les bibliothèques JS (MooTools, Scriptaculous, jQuery, Éclat...)?

OriginalL'auteur Jason

Assez approche fraîche et moderne (avec la hauteur spécifiée):

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

OriginalL'auteur Agat

Je suis à l'aide de l'écran:propriété de la zone:

#container {
    display: box;
    box-orient: vertical;
    box-pack: center;  
}

#text {
    vertical-align: middle;
}

Voir la js fiddle ici: verical aligner js-violon

OriginalL'auteur Ruwen

2

Utiliser la traduire de propriété, c'est simple et fonctionne même dans IE:
```
img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
```
Très joli et très court! Merci!

OriginalL'auteur beginner
1

Javascript serait probablement le meilleur le meilleur pour obtenir l'image centrée dans le centre vertical pour chaque cas. si vous pouvez utiliser une librairie comme jQuery c'est juste quelques lignes de code.
```
$(function(){
    var containerHeight = $('#container').outerHeight();
    var imgHeight = $('#logo img').outerHeight();

    var difference = (containerHeight - imgHeight)/2;
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});
```
});

Il a donc besoin d'inclure la totalité bibliothèque jQuery, en plus de ce script? Semble un peu exagéré, juste au centre de quelque chose.
s'il a pour centre de quelque chose de plus que quelques fois et si il ne sait pas A) quelle est la hauteur de la div parent est, et B) quelle est la hauteur de l'image, cela fonctionne à chaque fois, et dans tous les cas

OriginalL'auteur heymrcarter
0

Je suis à l'aide de flex pour centrer un élément. Il est efficace à rendre la page plus réactif.
```
div {
    display: flex;
    align-items: center;
}
```
Veuillez jeter un oeil ici pour savoir comment centrer verticalement.

OriginalL'auteur Webguru

Vous devez vous connecter pour publier un commentaire.