Pouvez ligne-taille de l'Attribut Hériter Div Parent de la Hauteur de la Propriété Ou de la Hauteur de l'Accès à la Propriété De La Div À Laquelle Il Appartient?

J'ai un div avec la hauteur 50px qui contient un enfant div. La hauteur de l'enfant div est hérité du parent à l'aide de la css paire attribut/valeur: hauteur: 100%.

    <div style="height: 50px;">
        <div style="height: 100%;">Some Text</div>
    </div>

Je veux verically aligner le texte dans l'enfant de la div et de le faire-je ajouter de la la hauteur de la ligne bien pour l'enfant div.

    <div style="height: 50px;">
        <div style="height: 100%; line-height: 50px;">Some Text</div>
    </div>

Avis que, pour la hauteur de la ligne j'ai à définir explicitement la hauteur 50px.

L'enfant div peut hériter la hauteur propriété de la société mère (en utilisant hauteur: 100%) mais pour la hauteur de la ligne je devez définir explicitement la valeur?

Si oui, c'est (OMI) kindof malpropre parce que disons que j'ai un div qui est imbriqué 10 niveaux de profondeur et il hérite la hauteur propriété tout en bas. Ensuite, si je veux verticalement aligner le texte à l'intérieur de ce div, j'ai non seulement code en dur la valeur est égale à la hauteur de la partie supérieure-la plupart des div parent mais j'ai naviguer par le biais de mon code pour trouver le parent qui définit explicitement la hauteur.

Noter que je ne veux pas définir la hauteur de la ligne au niveau du parent et ensuite utiliser hériter au nœud enfant à obtenir la valeur.

Ce serait bien si il y avait un moyen de mettre en la hauteur de la ligne égale à la hauteur de la div qu'il réside dans. Peut-être la syntaxe serait la suivante (totalement composé):

<div style="height: 100%; line-height: from-property('height');">Some Text</div>

Où la hauteur de la ligne utilise le de propriété méthode pour accéder à la propriété height. (Oui, je sais avoir une méthode telle que de propriété introduit la possibilité d'une dépendance circulaire, donc peut-être une autre façon serait mieux. Je suis simplement l'utiliser pour exprimer ce que je voudrais avoir.)

Merci!

Jan

  • Vous pouvez aussi aller c'est l'inverse, et de laisser la ligne-taille de l'enfant contrôle de la hauteur de la mère.
InformationsquelleAutor Jan Tacci | 2012-11-12
  1. 1

    Vous pouvez utiliser jQuery pour travailler sur la hauteur de la parent() puis ajouter la hauteur de la ligne de façon dynamique en fonction de la hauteur?

    Il ressemblerait à quelque chose comme:

    $(document).ready(function(){

    $('.lineHeightDiv').each(function(){
        var div_height = $(this).parent('div').height();
        $(this).css('lineHeight', (div_height / 2) + "px");
    });

});
    InformationsquelleAutor Brent
  2. 7

    line-height est conçu pour définir l'espacement entre les lignes, et de l'utiliser pour aligner quelque chose à la verticale n'est pas une bonne option. Sauf si vous êtes sûr que le contenu sera toujours dans une ligne.

    L'utiliser pour faire de ce centre vertical, pas parfait, mais.

    div.parent {
  display: table-cell;
  vertical-align: middle;
}
    • C'est un écueil potentiel, et n'est pas pris en charge dans IE7. À l'aide de la hauteur de la ligne à l'horizontale centrer le texte est parfaitement acceptable.
    • À droite, c'est pourquoi je dis qu'il n'est pas parfait. Mais voici quelques astuces pour le faire fonctionner dans IE7. jakpsatweb.cz/css/css-vertical-center-solution.html
    InformationsquelleAutor xiaoyi