Несколько изображений в одной строке

@rocknroll6ik · Регистрация: 10.03.2016

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

Добрый день! Вчера под-дня провисел над задачей, но самому решить не получилось.
Есть множество изображений 200x200 пикселей. Под каждым из них требуется задать описание, причем текст должен быть выравнен по центру (смотри вложение). В свою очередь само множество изображений (с соответствующими описаниями)должно быть выравнено по центру страницы.
Хочу сделать так, чтобы в зависимости от устройства (монитор ПК, дисплей планшета, дисплей телефона) эти условные "кубики", сами заполняли имеющееся пространство сверху вниз и слева направо (как обычный текст). Например, на мониторе ПК, в одной строке будут помещаться 5 картинок (смотри вложение). На планшете - 3, а на телефоне по одной в строке, то есть друг над другом.
И повторюсь, само множество изображений (с соответствующими описаниями)должно быть выравнено по центру страницы.

Помогите пожалуйста разобраться.

@mrtoxas · 11.06.2016, 11:25

А что не получалось? Задать блокам inline-block и в зависимости от размера экрана устанавливать (при помощи @media) размер блоков, которые помещаются в одной строке.

CSS

.wrapper {
  text-align: center;
}
figure {
  display: inline-block;
  text-align: center;
}
figure img {
  height: 200px;
}

HTML5

<div class="wrapper">
<figure>
    <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
    <figcaption>Samsung</figcaption>
</figure>
<figure>
    <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
    <figcaption>Samsung</figcaption>
</figure>
<figure>
    <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
    <figcaption>Samsung</figcaption>
</figure>
<figure>
    <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
    <figcaption>Samsung</figcaption>
</figure>
<figure>
    <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
    <figcaption>Samsung</figcaption>
</figure>
</div>

@rocknroll6ik · 11.06.2016, 15:09 **[ТС]**

Спасибо за ответ. Но есть одно "но". Если, к примеру, в первой строке помещаются 4 элемента, то пятый элемент будет во второй строке, но он также выравнивается по центру. Задача была сделать чтобы сам блок со всеми элементами позиционировался по центру страницы, но внутри блока, элементы шли слева направо. В данном случае пятый элемент должен быть ровно под первым элементом.

@mrtoxas · 11.06.2016, 15:49

Так?

CSS

.wrapper {
  float: right;
  position: relative;
  left: -50%;
}
.wrapimg{
  position: relative;
  left: 50%;
}
figure {
  float:left;
  text-align: center;
}
figure img {
  height: 200px;
}

HTML5

<div class="wrapper">
  <div class="wrapimg">
    <figure>
      <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
      <figcaption>Samsung</figcaption>
    </figure>
    <figure>
      <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
      <figcaption>Samsung</figcaption>
    </figure>
    <figure>
      <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
      <figcaption>Samsung</figcaption>
    </figure>
    <figure>
      <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
      <figcaption>Samsung</figcaption>
    </figure>
    <figure>
      <p><img src="https://www.cyberforum.ru/attachments/705329d1465630569" alt=""></p>
      <figcaption>Samsung</figcaption>
    </figure>
  </div>
</div>

Добавлено через 7 минут
Можно указать родительскому блоку максимальную ширину, как раз под требуемые картинки и выровнять его через margin:0 auto;

@rocknroll6ik · 12.06.2016, 19:29 **[ТС]**

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

@boilzzz · 13.06.2016, 08:19

rocknroll6ik, Оставьте в стилях только это

CSS

.wrapper {
position:relative;
}
.wrapper:after{
  display:table;
  content:'';
  clear:both;
}
figure {
  float:left;
  text-align: center;
}
figure img {
  height: 200px;
}

@rocknroll6ik · 13.06.2016, 08:57 **[ТС]**

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

@boilzzz · 13.06.2016, 13:03

rocknroll6ik,
попробуйте так,

CSS

.wrapper {
position:relative;
text-align:center;
}
.wrapper:after{
  display:table;
  content:'';
  clear:both;
}
.wrapimg{
  display:inline-block;
}
figure {
  float:left;
  text-align: center;
}
figure img {
  height: 200px;
}

@rocknroll6ik · 13.06.2016, 13:23 **[ТС]**

То же самое - div выравнивается по левому краю а не по центру (в горизонтальной плоскости) рабочей области. Прикрепил скрин того, что получилось

@boilzzz · 13.06.2016, 18:29

rocknroll6ik, в каком блоке у вас лежит div wrapper?

@rocknroll6ik · 13.06.2016, 21:19 **[ТС]**

Не уверен, что правильно понял, но div wrapper это основной блок, он, в свою очередь, содержит в себе блок div wraimg.
Короче html код использовал из 4-го поста, уважаемого mrtoxas. CSS использовал Ваш - разместил его внутри html кода, между тэгами <style> и </style>. Что делаю не так?

@boilzzz · 14.06.2016, 00:23

rocknroll6ik, все правильно.
Там есть нюансы просто каждый для своей верстки)
Попробуйте вот так

CSS

.wrapper {
position:relative;
text-align:center;
}
.wrapper:after{
  display:table;
  content:'';
  clear:both;
}
.wrapimg{
  display:inline-block;
  width:98%;
}
figure {
  float:left;
  text-align: center;
}
figure img {
  height: 200px;
}

если не получиться скинте архив с сайтом(если таковой есть) или дайте ссылку на сайт.

@rocknroll6ik 0 / 0 / 0 Регистрация: 10.03.2016 Сообщений: 35
		1
	Несколько изображений в одной строке 11.06.2016, 11:10. Показов 17697. Ответов 11 Метки нет (Все метки) Добрый день! Вчера под-дня провисел над задачей, но самому решить не получилось. Есть множество изображений 200x200 пикселей. Под каждым из них требуется задать описание, причем текст должен быть выравнен по центру (смотри вложение). В свою очередь само множество изображений (с соответствующими описаниями)должно быть выравнено по центру страницы. Хочу сделать так, чтобы в зависимости от устройства (монитор ПК, дисплей планшета, дисплей телефона) эти условные "кубики", сами заполняли имеющееся пространство сверху вниз и слева направо (как обычный текст). Например, на мониторе ПК, в одной строке будут помещаться 5 картинок (смотри вложение). На планшете - 3, а на телефоне по одной в строке, то есть друг над другом. И повторюсь, само множество изображений (с соответствующими описаниями)должно быть выравнено по центру страницы. Помогите пожалуйста разобраться. Миниатюры Изображения 0

@rocknroll6ik 0 / 0 / 0 Регистрация: 10.03.2016 Сообщений: 35
	11.06.2016, 15:09 [ТС]	3
	Спасибо за ответ. Но есть одно "но". Если, к примеру, в первой строке помещаются 4 элемента, то пятый элемент будет во второй строке, но он также выравнивается по центру. Задача была сделать чтобы сам блок со всеми элементами позиционировался по центру страницы, но внутри блока, элементы шли слева направо. В данном случае пятый элемент должен быть ровно под первым элементом. 0

@rocknroll6ik 0 / 0 / 0 Регистрация: 10.03.2016 Сообщений: 35
	12.06.2016, 19:29 [ТС]	5
	Теперь сам div, и картинки внутри него, складываются правильно, но при загрузке, страница отображается со смещением вправо, левой части вообще не видно 0

@rocknroll6ik 0 / 0 / 0 Регистрация: 10.03.2016 Сообщений: 35
	13.06.2016, 08:57 [ТС]	7
	хм. На этот раз картинки ложатся правильно, то есть внутри блока div они выравниваются по левому краю, как и требовалось. Но вместе с тем и сам div блок, также выравнивается по левому краю. А нужно чтобы по центру 0

@rocknroll6ik 0 / 0 / 0 Регистрация: 10.03.2016 Сообщений: 35
	13.06.2016, 13:23 [ТС]	9
	То же самое - div выравнивается по левому краю а не по центру (в горизонтальной плоскости) рабочей области. Прикрепил скрин того, что получилось Миниатюры 0

@boilzzz Богатый духовно 455 / 262 / 145 Регистрация: 10.03.2015 Сообщений: 1,057
	13.06.2016, 18:29	10
	rocknroll6ik, в каком блоке у вас лежит div wrapper? 0

@rocknroll6ik 0 / 0 / 0 Регистрация: 10.03.2016 Сообщений: 35
	13.06.2016, 21:19 [ТС]	11
	Не уверен, что правильно понял, но div wrapper это основной блок, он, в свою очередь, содержит в себе блок div wraimg. Короче html код использовал из 4-го поста, уважаемого mrtoxas. CSS использовал Ваш - разместил его внутри html кода, между тэгами <style> и </style>. Что делаю не так? 0

	14.06.2016, 00:23