J'ai fixé des divs de hauteur qui contiennent du texte en eux. J'aimerais que le texte soit aligné verticalement au milieu de la DIV, mais le problème réside dans le fait que une partie du texte est une seule ligne, et certaines se séparent sur deux lignes. Pour IE8, Chrome et Firefox, à l'aide de JS Fiddle est ici . Prenez l'astérisque sur la largeur Toutefois, IE7 ne prend pas en charge l'affichage Affichage: Cellule de table et VERTICAL-ALIGN: MOYEN Fournit la solution dont j'ai besoin:
: 300PX pour voir le formatage lorsque le texte est sur une ligne.
Affichage: propriété de la table de table . Les seules solutions que j'ai trouvées à cela s'appliquent uniquement aux lignes simples et non au texte pouvant être 1 ou 2 lignes. Comment puis-je avoir une affichage dans IE7 comme dans les navigateurs plus modernes, sans utiliser de scripts?
8 Réponses :
Que diriez-vous d'un appel IE7 CSS Call Placement http: // jsfiddle .NET / YAP59CN3 / P> Position: relative code> sur le div code> et absolu code> sur le h6 code> et gardez le code pour vertical-align code> pour les navigateurs modernes. div
{
/* Use inheritance, and override only the declarations needed. */
position:relative;
}
h6
{
height:auto; /* override inherited css */
position:absolute;
top:45%;
}
Vous devriez être capable d'accomplir cela avec hauteur de ligne code> et vertical-align: milieu; code>. div {
background-color: yellow;
height: 30px;
line-height: 30px;
width: 200px;
*width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
vertical-align: middle;
}
Personnellement, j'ai commencé à (ab) utiliser le rembourrage pour obtenir une alignée verticale. Il est particulièrement pratique si vous utilisez une hauteur fixe, car vous pouvez compenser la hauteur avec la valeur du rembourrage pour obtenir un élément de hauteur complet parfait.
Remarque: cette solution ne fonctionne que si vous savez quel texte viendra dans le solution: p> HTML strong> P > code> à l'avance. Si vous l'ajoutez de manière dynamique, je suggérerais que WordCountring d'essayer de comprendre si cela va envelopper ou non. P>
<div>
<h6 class="OneLineVertCentered">Here is some text.
Look at this lovely text. Isn't it nice?</h6>
</div>
<div style="margin-top: 1em;">
<h6 class="TwoLineVertCentered">Here is some text. Look at this <br />
lovely two-line text. Isn't it nice?</h6>
</div>
Vous pouvez utiliser un élément d'intervalle d'aide à la verticale alignez votre texte comme l'exemple suivant:
html css violon: http://jsfiddle.net/grouvemisg/dbx4rr0f/ Normalement, nous utiliserions un pseudo élément pour cela, mais IE7 (quelle surprise!) Ne supporte pas: Après,: avant ... etc. Notez également que IE7 ne prend pas en charge l'affichage: Inline-Block pour des éléments qui ne sont pas en ligne par défaut, comme DIV. Pour utiliser l'affichage: Inline-Block pour un div, vous devez utiliser le piratage suivant: comme suggéré ici ici Le bloc inline ne fonctionne pas dans Internet Explorer 7, 6
div {
background-color: yellow;
height: 400px;
width: 200px;
display: table-cell;
vertical-align: middle;
width: 300px;
}
h6 {
font-size: 12px;
line-height: 1em;
height: 30px;
}
Je connais deux autres méthodes à des éléments centraux verticalement qu'avec la pile de table:
1) avec hauteur de ligne: p> Ce ne fonctionnera que si le texte ne fonctionnera que si le texte ne fonctionnera que si le texte est en une seule ligne. p> 2) Position Absolute / Marge Auto P> .parentElement {
position: relative;
}
.element {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
Point clé ne doit pas utiliser de pixels pour l'alignement, d'utiliser uniquement des%. Fonctionne même sur IE5 :)
p>
<div class='wrapper'> <div class='cell'>vertically aligned text</div> </div>
+1 Bonne question. C'est une excellente référence pour les nouveaux développeurs Web.
Une meilleure question, pourquoi fournissez-vous toujours un soutien à IE7?