Наиболее поддерживаемые методы вертикального выравнивания?

До недавнего времени я использую Flexbox для вертикального выравнивания элементов, как так:Наиболее поддерживаемые методы вертикального выравнивания?

display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
-ms-flex-align: center; 
-webkit-align-items: center; 
-webkit-box-align: center; 
align-items: center;

Однако я начал работать на все больше и больше проектов, которые необходимо поддерживать старые браузеры, которые не поддерживают Flexbox например, Internet Explorer 8. Я хотел бы начать поддерживать гораздо более широкий диапазон браузеров и устройств.

Мой вопрос: какие из наиболее сильно поддерживаемых методов вертикального выравнивания используют только HTML и CSS?

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

Заранее спасибо.

источник

2017-01-09 codeoncaffeine

'позиция: абсолютная; top: 0; bottom: 0; left: 0; right: 0; 'должен делать это для вложенных div. –

https://jsfiddle.net/wqssxuh8/ <- Это должно работать в IE8 –

Вот очень простой пример от CSS Tricks. Вы можете установить верхнюю границу элементов на 50%, а затем поднять ее на половину своей высоты. Вот код:

body { 
 
    background: #f06d06; 
 
    font-size: 80%; 
 
} 
 

 
#div1 { 
 
    background: white; 
 
    height:  300px; 
 
    margin:  20px; 
 
    width:  300px; 
 
    position: relative; 
 
    resize:  vertical; 
 
    overflow: auto; 
 
} 
 

 
#div1 div { 
 
    position: absolute; 
 
    top:  50%; 
 
    left:  20px; 
 
    right:  20px; 
 
    background: black; 
 
    color:  white; 
 
    padding: 20px; 
 
    transform: translateY(-50%); 
 
    resize:  vertical; 
 
    overflow: auto; 
 
}

<body> 
 
    <div id="div1"> 
 
    <div> 
 
     I'm a block-level element with an unknown height, centered vertically within my parent. 
 
    </div> 
 
    </main> 
 
</body>

источник

2017-01-09 09:24:14

Это содержит недействительный HTML4.01, который используется в IE8. Ссылка: http://www.w3schools.com/tags/tag_main.asp –

Да, вы правы. Отредактировал код. –

Кроме того, IE8 не поддерживает CSS3. Преобразование: translateY (-50%); 'не будет работать. И, похоже, вы ввели CSS в поле Javascript. –

Если вы не имеете роскошь знать точный размер коробки вы хотите, чтобы выровнять по центру, то я обычно хожу с display:table-* CSS настроить.

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

Html

<div class="popup"> 
    <div class="popup-table"> 
    <div class="popup-table-cell"> 
     <div class="popup-body">Hello there!</div> 
    </div> 
    </div> 
</div>

Css

.popup{position:fixed;top:0;left:0;bottom:0;right:0;} 
.popup-table{display:table;width:100%;height:100%;} 
.popup-table-cell{display:table-cell;vertical-align:middle;text-align:center;} 
.popup-body{display:inline-block;border:1px solid black;padding:3em;}

Загрузил пример кода здесь: http://codepen.io/anon/pen/NdGpje

** Пожалуйста, обратите внимание, что .popup class - это только оболочка, вам не нужно ее использовать - просто для простого позиционирования, а также для оберточного элемента для .popup-table.

источник

2017-01-09 09:42:42

Техника, которую я использую для вертикального выравнивания содержимого в DIV находится с display: table;display: table-cell; и vertical-align:middle; так:

HTML:

<div class="block"> 
    <div class="block__module"> 
    <h1>Title</h1> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo pellentesque est quis mollis. Nulla suscipit risus a ornare viverra. Suspendisse potenti. Phasellus tempor imperdiet ullamcorper. Nam accumsan volutpat tincidunt. Cras eu mauris posuere, imperdiet elit ac, rutrum ligula. Maecenas ullamcorper sit amet nisi vitae consectetur. Sed ultrices lorem a fermentum lacinia. 
    </p> 
    </div> 
</div>

CSS:

.block { 
    display:table; 
    height: 500px; 
    width:100%; 
} 

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

Here является ссылку на скрипт с моим кодом.

Я понимаю, что ваш контент может быть динамическим, я не уверен, что изменение height из div на 100% поможет и достигнет того же результата, но этот способ вертикального выравнивания работает, по крайней мере, в IE8 plus.Я всегда объявляю высоту, но я понимаю, что это не то, что мы всегда можем сделать.

Я нашел аналогичный вопрос на этом вопросе, который может помочь, см. here.

Я также столкнулся с этим удобным генератором кода, который может помочь, см. here. Это дает вам возможность заполнить некоторые значения и создать наилучший вариант для вертикального выравнивания.

источник

2017-01-09 09:50:46

Наиболее поддерживаемые методы вертикального выравнивания?

ответ

Смежные вопросы