Центрирование изображения на экране с использованием CSS - произвольный размер экрана / изображения - PullRequest
Новая
       29

Центрирование изображения на экране с использованием CSS - произвольный размер экрана / изображения

2 голосов
/ 29 марта 2012

Мне нужно создать веб-страницу, которая для целей этого вопроса представляет собой одно изображение, центрированное по вертикали и по горизонтали в центре экрана. Он имеет следующие требования:

  • Размер экрана клиента неизвестен (мобильный)
  • Изображение определяется пользователем и, следовательно, имеет неизвестные размеры
  • Изображение должно быть идеально отцентрировано по вертикали и горизонтали на всех устройствах
  • Центрирование изображения должно сохраняться при повороте экрана (т.е. от портрета до пейзажа)

Будучи немного новичком в CSS, я пошел и создал это единственный способ, которым я знал, используя javascript для позиционирования контента: http://jsfiddle.net/error454/8YL9a/

Я ищу решение, которое идентично моему решению, но использует CSS вместо жестких уравнений.

Ответы [ 2 ]

2 голосов
/ 29 марта 2012 
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-pack:center;
-moz-box-align:center;

CSS3 свойство, плохая поддержка: webkit, mozilla. Единственный способ сделать это с чистой разметкой и CSS без JS.

изменить 1: http://jsfiddle.net/t8qtn/6/

edit 2: для проверки будущего версия без префикса - 

display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;
0 голосов
/ 29 марта 2012

Это хорошая статья о центрировании: http://www.w3.org/Style/Examples/007/center.en.html

Это должно быть что-то вроде: 

.vcenter { display:table-cell; vertical-align:middle; }
.hcenter { display:block; margin-left:auto; margin-right:auto; }

А затем применить оба класса к вашему изображению: 

<img class="vcenter hcenter" src="..."/>

Обновление: вы можете просто использовать таблицу как здесь http://www.sorinvasilescu.ro/

...