web-dev-qa-db-fra.com

Syntaxe: utiliser une variable pour la valeur css

Essayer de garder une boîte centrée verticalement dans une autre boîte. Je sais qu'il y a des CSS qui peuvent faire ça, mais je préfère utiliser jquery, plus fiable (?).

var textH = $(".Text").height();
var vertAlign = ((140 - textH)/2);

$(".Text").css({
    marginTop: 'vertAlign'
});

Je ne sais pas quel détail je manque. La sortie doit être la moitié de l'espace vertical disponible, en pixels.

MODIFIER

À l'origine, le bloc de texte était une étendue contenue par un div. Le div avait une hauteur définie (140 px dans ce cas), et le bloc de texte, la portée, serait de hauteur variable en fonction de la quantité de texte qu'il contenait. Cependant, j'ai besoin que ce bloc de texte soit modifiable. Je l'ai donc changé en zone de texte. cependant, le comportement pour les dimensions de la zone de texte est maladroit, et j'ai dû lui attribuer une hauteur et une largeur statiques. Maintenant, la hauteur de ce bloc de texte n'est pas variable, il n'y a donc pas de différence de hauteur entre lui et son parent avec lequel dériver l'espacement de la marge supérieure. Que devrais-je faire?

jquerycssmathvar
19
C_K

Supprimer les guillemets entourant vertAlign

$(".Text").css('margin-top', vertAlign);

Essayez le code ci-dessus. Cela doit vous aider.

32
Arman P.

facultativement si vous souhaitez faire plus d'un style:

var styles = {'margin-top':vertAlign,'property':100,'property':somevalue}
$(".Text").css(styles);
9
robx
var textH = $(".Text").height();
var vertAlign = ((140 - textH)/2);
$(".Text").css({
        margin-top: vertAlign + 'px'
    });

Vous devez spécifier l'unité, sinon votre navigateur ne sera pas en mesure de dire si vous voulez des pixels ou des em ou des pommes. Vous pouvez également vouloir vérifier la plage, vous ne voulez pas que vertAlign soit négatif.

2
Arjan