Как я могу исправить обрезку верхней и нижней части контента при вертикальном центрировании с помощью jquery?

Question

Как я могу исправить обрезку верхней и нижней части контента при вертикальном центрировании с помощью jquery?

0

У меня есть простая целевая страница, которую я создаю, и я использую jquery для вертикального центрирования содержимого на экране. Я выбрал jquery, так как высота контейнера не определена.

Скрипт отлично работает, за исключением того, что экран очень узкий по ширине (например, мобильный телефон), верх и низ обрезаны, и нет возможности прокручивать вверх и вниз. Я создал скрипку, чтобы показать вопрос, который у меня есть. Если вы сделаете ширину очень узкой, вы увидите, что содержимое теряется.

Есть ли простое решение для этого?

благодаря

скрипка

    $(window).resize(adjustLayout);
/* call function in ready handler*/
$(document).ready(function(){
adjustLayout();
/* your other page load code here*/
})

function adjustLayout(){
$('.main').css({
    position:'absolute',
    left: ($(window).width() - $('.main').outerWidth())/2,
    top: ($(window).height() - $('.main').outerHeight())/2
});

}

DC1 20 фев. 2014, в 20:17

Источник

0

Вы пробовали какие-либо css-only способы центрирования контента? Есть несколько методов, и с помощью медиа-запросов вы можете заставить его вести себя по-другому, если это необходимо на мобильном телефоне.
helion3 20 фев. 2014, в 18:50
0

Я думаю, что у вас есть гораздо лучшие варианты центрирования контента по вертикали без использования javascript / jQuery. Вот 6 методов, которые вы можете использовать: 6 методов для вертикального центрирования с помощью CSS
Renato Galvones 20 фев. 2014, в 19:09

Теги:

jquery

vertical-alignment

1 ответ

Ещё вопросы

Вы пробовали какие-либо css-only способы центрирования контента? Есть несколько методов, и с помощью медиа-запросов вы можете заставить его вести себя по-другому, если это необходимо на мобильном телефоне.
Я думаю, что у вас есть гораздо лучшие варианты центрирования контента по вертикали без использования javascript / jQuery. Вот 6 методов, которые вы можете использовать: 6 методов для вертикального центрирования с помощью CSS

Sunny · Accepted Answer · 2014-02-20T17-04-00.000Z

Проверьте отрицательные значения.

function adjustLayout(){
        var subheight=($(window).height() - $('.main').outerHeight())/2;
        $('.main').css({
            position:'absolute',
            left: ($(window).width() - $('.main').outerWidth())/2,
            top: (subheight>=0)?subheight:0,
            bottom: (subheight>=0)?subheight:0,
        });

    }

И переполнение дескриптора:

 <div class="main" style="margin: 10px; padding: 10px; max-width: 800px; text-align: center;overflow:auto;">