Выравнивание Div в центре экрана - метод Browser Креста

Выравнивание дел до центра экрана просто. Вы можете вертикально среднего и выравнивание по горизонтали центр выравнивания DIV элемент с помощью правил CSS.

A+ A-

Недавно один из читателей TechWelkin отметил, что совместив элементы DIV слишком много проблем и с помощью элемента таблицы намного лучше. Если вы хотите поместить два текстовых штук бок о бок, это легче сделать со столом. Ну, новые разработчики всегда чувствуют, что путь! Но, как они получают больше опыта и узнать новые вещи, они понимают, что DIV элементы отличаются высокой гибкостью и довольно проста в использовании. Новички часто спрашивают, "как выровнять и плавать DIV элемента прямо в центре экрана? ". Эта проблема состоит из трех частей:

  1. Выравнивание Div элемент к центру по горизонтали
  2. Затем выровнять DIV элемент в середине вертикали
  3. И, наконец, плавать DIV, так что он остается в центре экрана, когда пользователь прокручивает экран.

Такое расположение часто требуется , если вы хотите , чтобы отобразить "окна сообщения" DIV. Окна сообщений на веб-страницах традиционно показаны в середине экрана, чтобы получить максимальное внимание со стороны посетителей. Давайте узнаем, как выровнять DIV в середине экрана браузера. Давайте начнем с более простой вещи:

Горизонтально Центр выравнивать ДИВ

Это самый простой. Все , что вам нужно сделать , это установить левое и правое поля , как авто. Браузер обнаружит это свойство CSS и автоматически делать выравнивание по горизонтали. Например:

 # Мой-DIV {
Запас: 0 авто;
ширина: 400px;
}

Заметьте , что вы должны были бы дать определенную ширину к элементу сНу , потому что без указанной ширины, DIV элемент занимает всю ширину экрана. В результате, без заданной ширины, вы бы не быть в состоянии заметить выравниванием по центру.

Вертикально Средний выравнивать DIV на экране

Это немного сложная вещь. Есть несколько вариантов , чтобы сделать по вертикали средний выравнивание сНу элемента -Но лучший и кроссбраузерной решения упоминается Billbad на StackOverflow :

HTML

<div class="outer">
<div class="middle">
<div class="inner">Content</div>
</div>
</div>

Правила CSS

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}
TechWelkin.com также публикует веб-разработка Советы и учебники.

TechWelkin.com также публикует веб-разработка Советы и учебники.

Приведенные выше правила CSS будет работать во всех основных браузерах, за исключением, конечно, более старые версии Internet Explorer. Как мы все знаем, Internet Explorer имеет свои собственные правила! Так, к сожалению, мы должны определить различный набор свойств для IE. Вам придется условно добавить отдельный файл CSS, который будет содержать правила, которым должны следовать IE.

УСЛОВНО СОДЕРЖАТЬ StyleSheet

<!--[if lte IE 7]><link href="style-ie.css" rel="stylesheet" /><![endif]-->;

CSS для IE

.outer {
    display: inline;
    top: 0;
}

.middle {
    display: inline;
    top: 50%;
    position: relative;
}

.inner {
    display: inline;
    top: -50%;
    position: relative;
}
Объяснение: Как DIV получает выравнивается в центре?

Ключ к описанным выше способом правила CSS среднего DIV. Многие из вас , должно быть , пытались вертикального выравнивания по вертикали свойство выравнивания DIV. Но большинство из вас не удалось бы! Причина заключается в том, что это свойство работает на ячейках таблицы , а не на сНу элемента с блоком дисплея. Дисплей по умолчанию в DIV является блок, поэтому при создании DIV и попытаться вертикальное выравнивание его к среднему -it не будет работать. Прежде всего, необходимо будет установить дисплей свойство дел до таблицы-клетки.

Внешняя DIV в растворе выше, также играет важную роль. Он занимает всю площадь браузера с обеих ширины и высоты , установленной на 100%. Внешняя DIV создает площадку для среднего DIV так как средний DIV имеет весь экран к себе, и он может перейти в любом месте без какого-либо другого элемента, грядущего на своем пути. Свойство положение гарантирует , что внешний DIV плавает , когда пользователь прокручивает экран.

Комбинированный эффект наружного и среднего DIV является то, что они вертикального выравнивания по центру внутреннего DIV. Тогда внутренний DIV по горизонтали Выровнять по центру себя; что делает внутренний Div видимым прямо в центре экрана.

Я надеюсь, что он ответил на ваш вопрос. Пожалуйста, не стесняйтесь задавать вопросы. Благодарим Вас за использование TechWelkin!

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

Входящие с помощью Google была одна из лучших вещей, которы...

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии