Как создать центрирование изображения в окне браузера при резиновой или адаптрованной вёрстке?

Question

[Master284]

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

Вопрос- как отцентрировать изображение при этом?

Comments

[Froggyweb]

display: block;
margin: auto

[FabiBoom]

display: block;
   margin-left: auto;
   margin-right: auto;

[Master284]

Может я не правильно спрашиваю? Ещё раз вопрос. Есть блок контейнер на 95% ширины дизайна.
В нём ещё один блок на 65% ширины контейнера. А уже в нём лежит изображение и под ним блок секшен с текстом в тегах . Картинка обтекает блок с текстом слева.

Задача, сужаем окно браузера и блок содержащий изображение и блок с текстом начинает тоже сужаться., оставаясь в размере 65% от реального окна браузера.

Причём, картинка в размере не меняется, а блок с текстом сужается и в конечном итоге перескакивает под изображение. Это происходит тогда, когда блок с размером 65% приближается к размеру картинки, вернее, не доходя до него.

В момент полного перехода блока с текстом под картинку , картинка остаётся слева и не занимает центр, не смотря на выше указанные рекомендации.


Наверное, я что то не понимаю, но хотел бы понять.

Answer 1

[Максим]

создать контейнер по центру как описано здесь и внутрь спозиционировать ваше изображение ...и вопрос не сложный - достаточно написать вопрос в поисковике

Comments

[Master284]

Спасибо за видео. Толковое и не стандартное решение по размещению изображения в блоке.
У меня немного другой вопрос.
И я его наконец решил. Решение действительно очень простое, но требует одного, если присутствует свойство FLOAT, центрирование в блоке не возможно. Поэтому прежде, чем центрировать картинку в любом блоке надо:
-Перевести её в блочный вид display:block;
- CSS3
media screen and (max-width:900px){.elit img {float:none;display:block;margin:10px auto;padding:0px;}
.elit{margin:0px auto;width:95%;}
.elit section{display:block;padding:0px;max-width:100%;}
.elit section p{font-size: 0.843em;margin:0px 20px 10px 20px;}
article p{font-size: 0.843em;}}
И вот результат: