Как вертикально центрировать div для всех браузеров?

Question

Как вертикально центрировать div для всех браузеров?

Вы можете использовать GetCustomAttributesData() и GetCustomAttributes() :

var attributeData = typeof(Book).GetProperty("Name").GetCustomAttributesData();
var attributes = typeof(Book).GetProperty("Name").GetCustomAttributes(false);

1274

centering alignment cross-browser css vertical-alignment

задан John Slegers 1 May 2018 в 11:05

3 ответа

Другие вопросы по тегам:

centering alignment cross-browser css vertical-alignment

Похожие вопросы:

score 133 · Answer 1

На самом деле Вам нужны два отделения для вертикального центрирования. У отделения, содержащего содержание, должны быть ширина и высота.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Вот результат

score 21 · Answer 2

К сожалению, вЂ”, но не удивительно вЂ” решение более сложен, чем можно было бы хотеть, чтобы он был. Также, к сожалению, необходимо будет использовать дополнительные отделения вокруг отделения, которое Вы хотите вертикально центрируемый.

Для совместимых стандартами браузеров как Mozilla, Opera, Safari, и т.д. необходимо установить внешнее отделение, чтобы быть отображенными как таблица и внутреннее отделение, чтобы быть отображенными как ячейка таблицы вЂ”, который может тогда вертикально центрироваться. Для Internet Explorer Вы нуждаетесь к положение внутреннее отделение абсолютно во внешнем отделении и затем определяете вершина как 50% . Следующие страницы объясняют эту технику хорошо и обеспечивают некоторые примеры кода также:

Вертикальное Центрирование в CSS
<забастовка> Вертикальное Центрирование в CSS с Неизвестной Высотой (Internet Explorer 7 совместимых) (больше живой)
Вертикальное Центрирование в CSS с Неизвестной Высотой (Internet Explorer 7 совместимых) (Заархивированная любезность статьи Wayback Machine)

существует также техника, чтобы сделать вертикальное центрирование с помощью JavaScript. Выравнивание по вертикали содержания с JavaScript & CSS демонстрирует его.

Спасибо за Ваш ответ. Как я тогда сохранил фактический файл правильно? Прямо сейчас it' s " File" тип данных без расширения вообще и can' t быть открытым. — Rivka, 10 June 2012 в 21:12

score 0 · Answer 3

С тех пор каждый раз, когда я должен центрировать отделение вертикально, я гуглю для него много раз, и этот ответ всегда на первом месте, я оставлю это для будущего меня (так как ни одно из предоставленных решений не соответствует моей потребности хорошо):

Поэтому, если Вы уже используете начальную загрузку, это может быть сделано как указано ниже:

<div style="min-height: 100vh;" class="align-items-center row">
    <div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well

    //content goes here

    </div>
</div>