Сам виноват - и слезы лью,
И охаю -
Попал в чужую колею
Глубокую.
"Чужая колея"
В.Высоцкий

Едва ли, то, что предлагается, имеет большую практическую ценность. Но мини исследование было проведено, поделюсь его результатами.

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

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

Определимся, что же конкретно нам надо.

1. Любой элемент, находящийся в нашем блоке отцентрирован как по вертикали, так и по горизонтали
2. Графика ведет себя так, как сказано чуть выше
3. Никаких скриптов, голый html and css

По запросу "Vertically Center Content" в англоязычном сегменте Google, смог осилил только первые семь страниц, но в итоге стало ясно, что перечисленным условиям, все в едином комплекте, решения нет.

К великому сожалению в Рунете предпочитают больше рассуждать, как правильно с точки зрения стандартов от любимой и многоуважаемой конторы W3C, но вот с практикой явный застой и никаких по большому счету улучшений не предвидится. Не потому ли, на любой перевод статей зарубежных авторов, где рассматриваются те или иные аспекты именно с практической точки зрения, а вовсе не очередное изложение своего понимания спецификаций, все без исключения, слетаются как мухи на …, с многочисленными восторженными комментариями?

Чисто риторический вопрос, где свои собственные разработки, где уникальный контент? Так, чтобы без дураков - конкретная задача, конкретное решение, а не описка типа Яндекс - найдется все или Google - ничего и не терялось :)

Одно дело знать и поучать, что так свойственно нашим доморощенным "гуру" от верстки… Другое дело… Слово и дело…

Тусовка, как наркотик, отметился в комментах, и ты чуть ли не вошел в круг "избранных", ибо для очень многих это остается единственным способом заявить о себе, о своей причастности к тому, о чем имеется весьма смутное представление, как это не странно звучит.

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

Что ж, ждем новых переводов из-за бугра и под бой барабанов с громкими криками ура следуем по чужой колее :)

Вернемся к теме поста.

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

В принципе, ничего сложного, единственно, что смущает в реализации так это неоправданно, на мой взгляд, раздутый html. Но другого способа удовлетворяющего означенным условиям, пока нет, увы…

Скриншот, снят в FireFox, в других браузерах на тестовой странице, есть мелкие погрешности справиться, с которыми, почему-то не удалось :)

Слева на право, сверху вниз:

Просто текст, лишенный всяческих тегов, кроме перевода строки.

Текст в контейнере, для него прописан float, что будет, кстати, для горизонтального меню, которое располагается по центру, а при добавлении новых пунктов, раздвигается по горизонтали. Это еще одно из дополнительных условий, поставленное с целью универсализации данного метода.

Поведение картинок описывалось ранее. В последнем случае симметрично обрезано по краям слева и справа.

css

.imagecenter {
  background-color:#fff;
  border:1px solid #ccc;
  display:table;
  float:left;
  margin:5px;
  width:160px;
  min-height:150px;
}
*html .imagecenter {height:150px;}
html:root .imagecenter {height:150px;}
.picturecenter {
  font:12px/1.18 arial;
  display:table-cell;
  text-align:center;
  position:relative;
  vertical-align:middle;
  width:100%;
}
.picture {position:relative;overflow:hidden;width:100%;}
.piece,.image {float:left;position:relative;}
.piece {left:50%;}
.image {left:-50%;}
.picturecenter {#top:50%;}
.picture {#top:-50%;}
html:root .image {float:none;}

Пройдемся по узловым позициям, они выделены цветом:

Синий - в FireFox min-height в данном случае не работает, так для справки.

Зеленый - правила для "любимого" браузера

Красный - снова FireFox, к чему это приведет, вы можете посмотреть, закомментировав или временно удалив стилевое правило в тест-странице.

html

<div class="imagecenter"> 
 <div class="picturecenter">
  <div class="picture">
   <div class="piece">
    <div class="image">
     Тут, Ваше все :) 
    </div>
   </div>
  </div>
 </div>
</div>

Разночтения:

Нижний отступ в IE и иная высота в OPERA. А вот в FF ничего подобного не наблюдается.

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

Пример