Выровнять картинку на адаптивном сайте

@MePHiSto88 · Регистрация: 13.02.2015

Author24 — интернет-сервис помощи студентам

Добрый день! Подскажите как можно выровнять картинку по центру блока. Сайт адаптивный. Когда он в полном экране текст обтекает картинку справа, а само изображение слева и меня это устраивает. Но если уменьшить до мобильного, то текст не весь опускается вниз под картинку, а изображения остаётся в левой части.Хотелось бы, чтобы картинка стала по центру, а текст весь ушёл под неё. Пробовал исправить дело margin'ом, но фото двигается и в десктопном варианте...
Для наглядности прикрепляю картинки как выглядит сейчас. Текст без стилей.
Вот код стилей:

CSS

.img-responsive-ph,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  max-width: 100%;
  height: auto;
  float: left;
  margin: 0px 10px 7px 0px;
 box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-o-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
}

@Xteda · 09.04.2015, 10:18

Создаете медиа-запрос, убираете float, добавляете display:block, text-align: center;

@MePHiSto88 · 09.04.2015, 12:09 **[ТС]**

Не совсем то что хотел получается, тогда текст в любом режиме (полном\мобильном) находится под фото. И картинка всё ровно не по центру.

@Xteda · 09.04.2015, 12:23

Извиняюсь с text-align затупил. width: auto, margin: 0 auto.

Сообщение от MePHiSto88

тогда текст в любом режиме (полном\мобильном) находится под фото

Для того, что бы правило применялось только на мобильном разрешении создайте media-query.

@MePHiSto88 · 09.04.2015, 14:25 **[ТС]**

Сделал вот так вот:

CSS

@media (max-width:500px){
.img-responsive-ph,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  max-width: 100%;
  height: auto;
  width: auto;
  margin: 0 auto;
 box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-o-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
}
}

но никаких изменений...

@Xteda · 09.04.2015, 14:32

Display: block; забыли

@MePHiSto88 · 09.04.2015, 14:51 **[ТС]**

Не помогает. Уточню более полно, как реализовано :

CSS

@media (max-width:500px){
.img-responsive-ph,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  max-width: 100%;
  display: block;
  height: auto;
  width: auto;
  margin: 0 auto;
 box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-o-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
}
} 
.img-responsive-ph,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  max-width: 100%;
  height: auto;
  float: left;
  margin: 0px 20px 7px 0px;
 box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
-o-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
}

2-ой блок срабатывает и влияет на стили

@Xteda · 09.04.2015, 15:39

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

Добавлено через 1 минуту
достаточно указать в медиа-запросе

CSS

@media (max-width:500px){
.img-responsive-ph,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  float: none;
  display: block;
  width: auto;
  margin: 0 auto;
}

Добавлено через 3 минуты
Вы не до конца понимаете каскадность и работу медиа-запросов. Советую почитать об этом.

@MePHiSto88 · 10.04.2015, 10:22 **[ТС]**

Теперь получилось. Медиа-запрос перенёс в самый низ, где уже закончились основные стили. До этого просто размещал под основным стилем картинки, видно дальше media где-то перебивался ещё основным стилем. Спасибо!

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	09.04.2015, 10:18	2
	Создаете медиа-запрос, убираете float, добавляете display:block, text-align: center; 0

@MePHiSto88 0 / 0 / 0 Регистрация: 13.02.2015 Сообщений: 105
	09.04.2015, 12:09 [ТС]	3
	Не совсем то что хотел получается, тогда текст в любом режиме (полном\мобильном) находится под фото. И картинка всё ровно не по центру. 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	09.04.2015, 12:23	4
	Извиняюсь с text-align затупил. width: auto, margin: 0 auto. Сообщение от MePHiSto88 тогда текст в любом режиме (полном\мобильном) находится под фото Для того, что бы правило применялось только на мобильном разрешении создайте media-query. 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	09.04.2015, 14:32	6
	Display: block; забыли 0

@MePHiSto88 0 / 0 / 0 Регистрация: 13.02.2015 Сообщений: 105
	10.04.2015, 10:22 [ТС]	9
	Теперь получилось. Медиа-запрос перенёс в самый низ, где уже закончились основные стили. До этого просто размещал под основным стилем картинки, видно дальше media где-то перебивался ещё основным стилем. Спасибо! 0

Выровнять картинку на адаптивном сайте

Решение