Vertical aligner tous les éléments (!) Dans TD?
J'ai un simple table avec 1 TD avec vertical-align:middle;. Cette TD contient une Image:
<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
</td>
</tr>
</table>
Tout est Ok et la IMG est alignée verticalement.
But Si j'ajoute d'autres éléments après cette image (une span par exemple):
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
<span>aaa</span>
</td>
Le résultat est :
Question
L'alignement vertical du TD ne doit-il pas aligner verticalement tous ses fils?
Comment puis-je ajuster la span au aussi?
NB
Je ne veux pas ajouter une autre TD, ni utiliser float avec padding/margin. IE8 +.
modifier:
Résultat désiré :
Question
L’alignement vertical du TD ne doit-il pas aligner verticalement tous ses enfants?
NON.
Lorsque vous appliquez vertical-align à td, il s’applique uniquement à td et est non hérité par l'un de ses enfants.
Si j'ai un TD avec seulement une portée, il sera aligné verticalement. Si j'avais un TD avec seulement un IMG à l'intérieur, il s'alignerait également.
Ceci est dû au fonctionnement de vertical-align pour td. La hauteur totale de la cellule, c'est-à-dire td est calculée et la cellule entière est alignée verticalement.
S'il y a un seul img, alors la hauteur de td est identique à celle de img, de sorte que semble que vertical-align pour img est également middle. Mais en réalité, la td est alignée verticalement au milieu avec la img comme vertical-align : baseline
Il en est de même lorsqu'il existe un seul span.
mais si j'ai les deux, ça ne va pas. pourquoi donc ?
Parce que maintenant, la height de td est la combinaison height des deux img + span. Donc, en fait, td est aligné verticalement au milieu, mais pas img et span.
Comment puis-je faire que la durée soit également centrée?
Vous devez appliquer ce CSS:
td > * {
vertical-align : middle;
}
Cela va appliquer le CSS à tous les enfants.
Vérifiez le JSFiddle pour une meilleure image.
J'espère que ça répond à ta question.
Vous pouvez simplement utiliser vertical-align: middle; à votre span
img
{
height:43px;width:43px;
display: inline;
vertical-align: middle;
}
span
{
vertical-align:middle;
display: inline;
}
Comme par commentaire
Vous pensez peut-être que si td reçoit vertical-align: middle;, il devrait alors aligner tout le contenu, mais avoir une image et une étendue dans lesquelles le navigateur comprend l'image est quoi? : est-ce inline ou inline-block, vous devez donc définir display: inline ou inline-block; Ensuite, vous verrez peut-être que sa propriété d'affichage ne fonctionne que si elle est appliquée à une image. démo
Modifier
img tag: source: affichez inline vs inline-block
Ce sont des éléments "bloc" en ce sens qu'ils ont une largeur et une hauteur.
C'est vrai, ce sont les deux - ou plus précisément, ce sont des éléments "inline block". Cela signifie qu’ils s’écoulent en ligne comme du texte, mais qu’ils ont une largeur et une hauteur similaires à celles des éléments de bloc.
Eléments remplacés
Un élément remplacé est un élément dont l'apparence et les dimensions sont définies par une ressource externe. Les exemples incluent des images (tags), des plugins (tags) et des éléments de formulaire (, et tags). Tous les autres types d'éléments peuvent être qualifiés d'éléments non remplacés.
Les éléments remplacés peuvent avoir des dimensions intrinsèques, c'est-à-dire des valeurs de largeur et de hauteur définies par l'élément lui-même plutôt que par son environnement dans le document. Par exemple, si un élément d'image a une largeur définie sur auto, la largeur du fichier d'image lié sera utilisée. Les dimensions intrinsèques définissent également un rapport intrinsèque utilisé pour déterminer les dimensions calculées de l'élément si une seule dimension est spécifiée. Par exemple, si seule la largeur est spécifiée pour un élément d'image (par exemple, 100 pixels) et que l'image réelle mesure 200 pixels de large et 100 pixels de haut, la hauteur de l'élément sera réduite de la même valeur, jusqu'à 50 pixels.
Les éléments remplacés peuvent également avoir des exigences de mise en forme visuelle imposées par l'élément, en dehors du contrôle de CSS; par exemple, les contrôles d'interface utilisateur rendus pour les éléments de formulaire.
Dans un contexte de mise en forme en ligne, vous pouvez également considérer un élément remplacé comme un élément qui agit comme un gros caractère unique aux fins de l'habillage et de la présentation. Une largeur et une hauteur peuvent être spécifiées pour les éléments en ligne remplacés, auquel cas la hauteur de la zone de ligne dans laquelle l'élément est positionné est suffisamment haute pour contenir l'élément remplacé, y compris les propriétés de zone spécifiées.
Dans tous les cas, le vertical-align: middle; sur la td fait ce qu'on attend de lui. Autrement dit, alignez la td au centre de cette ligne et tout le contenu de la td au milieu vertical (par défaut) en laissant des espaces égaux en haut et en bas.
Voici ce que la Spécification W3 dit à propos de
vertical-align: middle:Le centre de la cellule est aligné sur le centre des lignes qu’elle recouvre.
Calcul de la hauteur de la ligne:
La hauteur de la boîte d'un élément 'table-row' est calculée une fois que l'agent utilisateur a toutes les cellules de la ligne disponibles: c'est le maximum de la 'hauteur' calculée de la ligne, la 'hauteur' calculée de chaque cellule de la ligne, et la hauteur minimale (MIN) requise par les cellules.
Dans CSS 2.1, la hauteur d'une boîte de cellule est la hauteur minimale requise par le contenu. La propriété 'height' de la cellule de table peut influer sur la hauteur de la ligne (voir ci-dessus), mais elle n'augmente pas la hauteur de la zone de cellule.
Les zones de cellules plus petites que la hauteur de la ligne reçoivent un remplissage supérieur ou inférieur.
En raison de ce qui précède, la hauteur de tr et de td devient 100px mais la zone de cellule n'occupe que la quantité de hauteur requise par le contenu (img height = 43px). Maintenant, puisque la case Cellule est plus petite que la hauteur de la ligne, un remplissage supplémentaire est ajouté, comme indiqué dans la case 5 de l'image ci-dessus, ce qui permet également d'aligner le contenu au milieu.
TD n'a qu'une image:
Lorsqu'il n'y a qu'une img, la hauteur du contenu est égale à la hauteur de la img. Donc, il se positionne au milieu.
Comme on peut le voir dans l'image ci-dessus, cela ne nécessite pas explicitement un vertical-align: middle sur la img car la td aligne son contenu au milieu.
TD n'a que des données en ligne:
Lorsque la variable td a uniquement une variable span ou span plus une variable inline div, la hauteur du contenu est égale à la valeur par défaut line-height pour le texte (ou tout line-height spécifié). Dans ce cas également, la variable td l'aligne correctement.
Lorsque le contenu du texte dépasse la première ligne (reportez-vous à la démo), vous pouvez constater que la variable td pousse automatiquement le first-line (indiqué en arrière-plan cyan) vers le haut pour garantir que le contenu de l'ensemble est aligné au centre une seule ligne).
TD a une image et une étendue:
Lorsque nous mettons une img et un span (texte en ligne) dans la td, la hauteur du contenu devient égale à la hauteur de la img plus le line-height de la deuxième ligne et des lignes suivantes.
Dans cette situation, il existe deux cas possibles décrits ci-dessous:
Cas 1 -imgtag n'a pas devertical-alignspécifié
Dans ce cas, la img est alignée sur la baseline (valeur par défaut). Ensuite, la td aligne l'intégralité du contenu au milieu. Cela signifie que td laisse environ 28.5px (= (100-43)/2) espace en haut et en bas du contenu. Encore une fois, le vertical-align sur td fait le travail, il place le contenu au milieu (c’est-à-dire, laissez un espace égal en haut et en bas). Mais le texte est abaissé parce que img height est plus.
Si nous réduisons la hauteur img à une hauteur inférieure à la hauteur de la ligne (disons 10 pixels), nous constatons que même avec img + span, elle est alignée au centre.
Cas 2 -imgtag avertical-align: middle
Dans ce cas également, vertical-align sur la td fait la même chose que pour le cas 1. Cependant, le texte dans ce cas est près du milieu / car la img est également alignée sur la middle de la ligne.
table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}<table>
<tr class='one'>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
</tr>
<tr class='two'>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class='three'>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
</tr>
<tr class='four'>
<td>
Case 2
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class='five'>
<td>
Case 3
<img src='http://static.jsbin.com/images/favicon.png' />
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span text...</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>Voici une solution de violon JS
Voici le css
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
display: inline;
height: 43px;
width: 43px;
position: relative !important;
float: left;
}
span
{
height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}
Ajoutez simplement vertical-align:middle; à votre style img?
<style>
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
width:100%;
border:solid 1px green;
vertical-align:middle;
line-height:100px;
}
img
{
height:43px;width:43px;
vertical-align:middle;
}
</style>
Tento atribut CSS ne contient pas de données sur la personne . Éléments de base pour la lecture des éléments de base (texte standard), élément de base pour la définition de l'élément de photo.
Stačí přidat vertical-align: middle do třídy <img>.
Vaše CSS par měla vypadat takto ...
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
vertical-align: middle;
}
Můžete zobrazit Sample Fiddle ...
il suffit d'ajouter cette classe:
td *{
vertical-align:middle
}
Modifier:
la question qui se pose est de savoir pourquoi, lorsque vous ajoutez une image au texte td, aller au bas de l’image et non plus au milieu de td.
voici ma réponse:
lorsque vous définissez tdvertical-align sur middle, il ne faut pas que tout le contenu vertical-align soit sur middle, ils sont toujours baseline. et lorsque vous ajoutez une image au texte, la hauteur de ligne est égale à la hauteur de l'image et le texte correspond au bas de cette hauteur. Vous devez donc définir vertical-align sur middle pour résoudre ce problème.
ici vous pouvez voir ce que j'ai dit: D&EACUTE;MO
_ {désolé pour mon mauvais anglais} _
Je pense que nous y sommes presque tous mais
td img,
td span {
display:inline-block;
vertical-align:middle;
}
semble fonctionner.
Ou est-ce que je manque quelque chose?
C'est ce que tu veux dire? http://jsfiddle.net/JFVNq/
La raison en est que les étendues sont traitées en ligne, vous devez donc les bloquer.
CSS pour la durée:
td.vert span
{
vertical-align: middle;
display: block;
}