Выравнивание картинок в 1 ряд по горизонтали с переносами
Нужно выровнять изображения в 1 ряд, чтобы было все в ровень. А то получается что верхний ряд съезжает вниз из-за переносов
. Второй и последующие ряды отображаются нормально как надо. Правки могу внести только в CSS.
.pic < display: block >.pic img
Отслеживать
user262779
задан 22 окт 2018 в 20:39
Michail Sotnikov Michail Sotnikov
5 1 1 серебряный знак 3 3 бронзовых знака
Здравствуйте. Нужно выровнять верхний ряд изображений по горизонтали, чтобы они не смещались как в примере. Правки можно внести только в css файл. В html просто убрать лишние переносы BR нет возможности.
22 окт 2018 в 20:53
Вопрос перевел. На счет кода я пробовал присвоить родительскому диву ID #pic br
22 окт 2018 в 21:04
А зачем вообще с помощью
, задача такая? А то это геморный способ если честно и никто так не делает в жизни.
– user262779
22 окт 2018 в 21:12
Есть пара сайтов, в которых напарсено несколько тысяч галлерей с фотографиями. Раньше фото отображались в 1 ряд, сейчас в новых шаблонах должны отображаться в 2-3 ряда. Если править html, уйдет очень много времени. Ну если с css не получится, придется убирать как-то лишние переносы вручную. Потому что на автомате они уберутся и из текста
22 окт 2018 в 21:19
Интересует вопрос: Почему только в первом ряду изображения отображаются криво? Во втором, третьем и последующих все ровненько. И этот баг на всех браузерах.
22 окт 2018 в 21:21
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
.pic < display: flex; flex-wrap: wrap; >.pic img
Отслеживать
ответ дан 22 окт 2018 в 21:13
Alexandr Tovmach Alexandr Tovmach
2,212 2 2 золотых знака 9 9 серебряных знаков 26 26 бронзовых знаков
Спасибо. Уже ровно, но все изображения встали в 1 ряд. Как сделать автоматический перенос на следующий ряд? Для примера блок шириной 960px
22 окт 2018 в 21:26
Отредактировал ответ
22 окт 2018 в 21:54
Но ранее вы писали, что у вас текст сверху должен быть, в данном методе текст будет строго справа или слева, смотря в какое место он пишется. Если до img — тогда слева, после — справа!
.pic < display: flex; flex-wrap: wrap; >.pic img
Отслеживать
ответ дан 22 окт 2018 в 21:28
Павел Игоревич Павел Игоревич
873 5 5 серебряных знаков 20 20 бронзовых знаков
Большое спасибо! Заработало! Вопрос решен.
22 окт 2018 в 21:31
@MichailSotnikov да не за что, поставлю + Александру, я просто не заметил, что он раньше написал ответ(
22 окт 2018 в 21:32
@ПавелИгоревич Спасибо)
22 окт 2018 в 21:55
@AlexandrTovmach да не за что, я просто открыл полигон и ушел курить, а потом пришел и написал код )) Так что прошу прощения(
22 окт 2018 в 21:56
.pic < display: inline-block; float: left; >.pic > br < display: none; >.pic
Какой-то
Текст
Отслеживать
ответ дан 23 окт 2018 в 1:21
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
Спасибо большое! Этот результат также пригодился на другом сайте, где встречается текст с изображениями вперемешку.
Как выровнять изображения и текст во горизонтали/по центру?
Добрый день.
Сразу скажу что решение искал, html book читал но не понимаю как реализовать.
Задача отцентрировать по горизонтали и по центру 4 картинки и по 2 надписи к ним. (Пример как на рисунке)
Есть код HTML:
Текст 1
Текст 2
Текст 1
Текст 2
Текст 1
Текст 2
Текст 1
Текст 2
У меня проблема здесь — код CSS:
.counter < display: inline-block; position: absolute; left: 25%; background: #9dceb4; white-space: nowrap; text-align: center; >.counter img < display: inline-block; margin: 5px; width: 200px; white-space: nowrap; >.counter p
Что неправильно я делаю?
Дайте рекомендации, не могу реализовать.
Выравнивается все по вертикали а не по горизонтали.
- Вопрос задан более трёх лет назад
- 5100 просмотров
Выравнивание изображения
Расположение картинки влияет на общий вид страницы, на восприятие текста вокруг нее. Удобство чтения текста, находящегося около картинки, сильно зависит от их взаимного расположения.
Есть множество вариантов выравнивания картинок относительно текста, и за все отвечает атрибут align элемента IMG. Он позволяет выравнивать изображения с правой, с левой стороны окна или относительно элементов строки.
У атрибута align много значений, которые позволяют установить картинку именно так, как надо, и именно там, где надо.
• left – по левому краю;
• right – по правому краю.
• top – выравнивание верхней границы картинки по самому высокому элементу строки;
• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;
• middle – середина изображения выравнивается по базовой линии строки;
• absmiddle – середина изображения выравнивается по середине строки;
• baseline – выравнивание нижней границы изображения по базовой линии строки;
• bottom – аналогично baseline;
• absbottom – нижняя граница изображения выравнивается по нижней границе текущей строки.
Примечание
Базовая линия строки – это линия, на которой расположены все элементы. При этом некоторые буквы выступают за эту линию, например буква «р». Ее палочка заканчивается ниже базовой линии и будет самым нижним элементом строки. Заглавные буквы, наоборот, выступают сверху этой линии.
В листинге 4.3 приведены примеры выравнивания картинок относительно текста по вертикали.
Листинг 4.3. Выравнивание картинки по вертикали
Выравнивание по самому верхнему элементу в строке
Нижняя граница изображения выравнивается по нижней границе текущей строки
Нижняя граница изображения выравнивается по базовой линии строки
Середина изображения выравнивается по базовой линии строки
