jquery marginTop не работает должным образом - PullRequest
Новая
       9

jquery marginTop не работает должным образом

0 голосов
/ 20 марта 2011

Я пытаюсь расположить текст по вертикали с неизвестной высотой в пределах деления известной высоты.Я попробовал опцию css display: table-cell, и она не сработала, поэтому я использую jQuery для определения высоты, а затем применяю верхнее поле, если необходимо, чтобы выполнить центрирование - что работает, когда что-то нужноскорректировать, но затем не работает, чтобы перенастроить его, чтобы иметь верхнее поле равное нулю.

Это моя функция: 

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);
}

Переменная trendMargin всегда либо ноль, либо двенадцать.Если он равен нулю, изначально все настроено правильно.Тогда, если это двенадцать, он устанавливает верхнее поле соответствующим образом.Но потом, когда я добираюсь до следующего элемента с marginTop, равным нулю, он не возвращает вещи обратно на то место, где они были.Как я могу вертикально выровнять этот материал?Похоже, вертикальное центрирование не должно быть таким сложным ...

Ответы [ 3 ]

1 голос
/ 20 марта 2011

попробуйте использовать 'margin-top' вместо 'marginTop'

1 голос
/ 20 марта 2011

Это сделает это:

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%; 
}

Для установки высоты DIV вы используете line-height вместо height. Затем на дочернем элементе (контейнере для текста) вы устанавливаете line-height обратно в «нормальное состояние», а также устанавливаете display:inline-block (это необходимо).

Демонстрационная версия: http://jsfiddle.net/simevidas/5qXMj/1/

0 голосов
/ 20 марта 2011 
<table><tr><td>
    <p>I wont tell anyone if you dont. Inline CSS for extra points.</p>
</td></tr></table>
...