jquery marginTop ne fonctionne pas correctement

J'essaie de centrer verticalement du texte d'une hauteur inconnue dans une div d'une hauteur connue. J'ai essayé l'option css display: table-cell, et cela n'a pas fonctionné, donc j'utilise jQuery pour détecter la hauteur et ensuite appliquer une marge supérieure, si nécessaire, afin d'accomplir le centrage - ce qui fonctionne quand quelque chose doit être ajusté , mais ne fonctionne pas pour le réajuster pour avoir une marge supérieure de zéro.jquery marginTop ne fonctionne pas correctement

C'est ma fonction:

function change_trend(){ 
      trend_text = $('#trends_holder img:eq(' + item_count + ')').attr('data-content'); 
      $('.trend_text').text(trend_text); 
      var trendMargin = $('.trends_scroller').height() - $('.trend_text').innerHeight(); 
      $('.trend_text').css('marginTop',trendMargin); 
}

La trendMargin variable est toujours zéro ou douze ans. Si c'est zéro, au départ, tout est réglé correctement. Ensuite, s'il est douze, il définit la marge supérieure de manière appropriée. Mais quand j'arrive à l'élément suivant avec une marge de zéro, cela ne remet pas les choses en place là où elles étaient. Comment puis-je aligner verticalement ce genre de choses? Il ne semble pas vraiment comme le centrage vertical devrait être aussi dur ...

Source

2011-03-20 mheavers

Pouvez-vous faire un exemple sur [jsFiddle] (http://jsfiddle.net/)? est également '.trend_text' un élément de niveau bloc? ('div')? – ifaour

Cela fera:

HTML:

<div> 
    <p> Some text here <br> Some more text here. </p> 
</div>

CSS:

div { 
    line-height:300px; 
} 

p { 
    line-height:1em; 
    display:inline-block;   
    width:100%; 
}

Pour définir la hauteur du DIV, utilisez line-height au lieu de height. Ensuite, sur l'enfant (le conteneur pour le texte), vous réglez line-height sur "normal", et également display:inline-block (cela est nécessaire).

démonstration en direct:http://jsfiddle.net/simevidas/5qXMj/1/

Source

2011-03-20 12:13:24

bizarrement, alors que cela fonctionne dans JS Fiddle, cela ne fonctionne pas si je l'implémente dans mon code. Les exemples de lignes simples fonctionnent, mais les éléments de deux lignes ou plus sont simplement alignés sur le haut de la div. Pas certain de pourquoi. Mais c'est un bon conseil. Je vais essayer de l'implémenter dans d'autres projets. – mheavers

@mheavers Vous pouvez utiliser les outils de développement de Chrome pour examiner les styles CSS appliqués à vos éléments. De cette façon, vous devriez être capable de comprendre le problème facilement. –

<table><tr><td> 
    <p>I wont tell anyone if you dont. Inline CSS for extra points.</p> 
</td></tr></table>

Source

2011-03-20 11:53:59 Marcel

haha. Très drôle. – mheavers

essayez d'utiliser 'margin-top' au lieu de 'marginTop'

Source

2011-03-20 11:55:24

jQuery fait déjà cette conversion. – Guffa

jquery marginTop ne fonctionne pas correctement

Répondre

Questions connexes