CSS: стандартный (динамический) способ централизации элемента по оси Y

Question

мой вопрос более или менее говорит само за себя, я пытаюсь найти стандартный динамический способ централизации элемента по оси Y, очень похожий на:

margin: auto;

Для оси X,Есть идеи?

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

<div id="main" style="display: block;"> 
    <img style="margin: auto; display: block;" 
    src="http://www.example.com/img.jpg" />
</div>

Любая помощь будет оценена!:)

Answer 1

Просто сдайтесь и используйте таблицы на этом, с vertical-align: middle. Вы можете сойти с одного стола, состоящего из одной строки, не чувствуя себя слишком виноватым (я сплю как ребенок из-за этого). Это не самая семантическая вещь в мире, но что бы вы предпочли сохранить, крошечный одноклеточный столик, или определить точную высоту и сделать абсолютное позиционирование с отрицательными полями?

Answer 2

Вот вариант с использованием vertical-align

http://jsfiddle.net/audetwebdesign/r46aS/

Недостатком является то, что вам нужно указать значение для line-height, которое также будет определять высоту содержащего элемента, который действует как область просмотра (выделено синим цветом).

Примечание : Вы можете обойти проблему с высотой окна, установив высоту для элемента body или html (100%), но вам нужно будет попробовать ее (см. 3-ю ссылку).

Однако хорошо то, что вам не нужно выполнять математику в зависимости от размеров изображения.

Вот некоторые ссылки, связанные с вертикальным выравниванием:

http://css -tricks.com / что-это-вертикально-Align

http://blog.themeforest.net/tutorials/vertical-centering-with-css

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

и иногда мне приходится вспоминать основы, поэтому я перечитал:

http://www.w3.org/TR/CSS21/visudet.html

Это может не решить проблему OP, но может быть полезно в других контекстах.

Answer 3

Лучший известный метод - использовать абсолютное позиционирование. Вы устанавливаете верхнюю сумму на 50%, а затем устанавливаете верхнюю границу минус половина элемента.

#main {
    position: relative;
}
#main img {
    position: absolute;
    top: 50%;
    margin-top: -(half your image height)px;
}

Answer 4

Я знаю только один способ для этого:

#mydiv {
   position: fixed;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin-top: -50px;
   margin-left: -50px;
}

Это для осей x и y - но ширина / высота и поля должны быть изменены для каждого элемента.Я ненавижу это: -)

Кроме того, у вас возникают проблемы, если элемент больше окна браузера.

Answer 5

Если вы знаете высоту элемента, который пытаетесь отцентрировать, вы можете сделать это:

img {
  display: block;
  height: 500px;
  position: absolute;
  top: 50%;
  margin-top: -250px; /* 50% of your actual height */
}

Answer 6

Использование #menu img { vertical-align: middle; } в моей таблице стилей прекрасно работает для последних версий FireFox, Opera, Safari и Chrome, но не в IE9.Я должен вручную добавить style="vertical-align: middle" к каждой строке кода IMG.Например:

<li><a href="../us-hosts.php">
    <img src="../images/us-button.png" width="30" height="30"
         alt="US Hosts" style="vertical-align: middle;"/>&nbsp; US Hosts</a>
</li>