Выравнивание и размещение элементов

@sergo5000 · Регистрация: 02.09.2019

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

Здравствуйте. Изучаю css и никак не могу разобраться с выравниванием и размещением элементов. Постоянно какие-то проблемы.
Последнее с чем столкнулся есть блок, в нем текст и картинка. Блок изменяет размеры в зависимости от ширины экрана. Выравнивание по вертикали и горизонтали в блоке делается с помощью flex. Размер текста и картинки не меняется (чтобы упростить пример). И все нормально пока текст помещается в одну строку, когда перестает помещаться - выравнивание по горизонтали перестает работать.

HTML5
1
2
3
4
<div class="wrapper">
    <img src="picture.png">
    <p>Текст текст текст</p>
</div>

CSS
1
2
3
4
5
6
7
.wrapper {
    width: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

1. Подскажите как нужно сделать?
2. Может вы знаете какие-нибудь книги или ресурсы чтобы разобраться с этой темой самому. Интересует именно тема размещения элементов на странице, разбор сложных примеров. Чтобы объясняли когда какие возможности использовать (float, table-cell, inline, flex).

@novichek_1905 · 02.09.2019, 23:22

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

И все нормально пока текст помещается в одну строку, когда перестает помещаться - выравнивание по горизонтали перестает работать.

Это не так, выравнивание все также продолжает работать. Пруф во вложении, многострочный текст выровнен по вертикале относительно картинки.

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

1. Подскажите как нужно сделать?

Вы все верно сделали

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

Может вы знаете какие-нибудь книги или ресурсы чтобы разобраться с этой темой самому. Интересует именно тема размещения элементов на странице, разбор сложных примеров. Чтобы объясняли когда какие возможности использовать (float, table-cell, inline, flex).

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

@novichek_1905 · 02.09.2019, 23:22

Пруф

@sergo5000 · 03.09.2019, 00:13 **[ТС]**

Выравнивание по горизонтали не работает.

В первом случае отступы справа и слева одинаковые.

Во втором случае отступ справа есть, а слева нет.

@novichek_1905 · 03.09.2019, 00:19

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

Выравнивание по горизонтали не работает.

все работает! Смотрите, сама логика выравнивания по горизонтали устроена таким образом, когда блок шире контента, контент выравнивается относительно блока. А когда контент блока равен его ширине, естественно выравниваться относительно чего он будет? Получается относительно своей собственной ширине)?

@sergo5000 · 03.09.2019, 00:22 **[ТС]**

Сейчас много материала на том же ютуб, бери да учись, но есть проблема, мало кто говорит о нюансах

Может вы можете что-нибудь посоветовать?

@novichek_1905 · 03.09.2019, 00:46

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

Может вы можете что-нибудь посоветовать?

К сожалению из того что вижу, ничего не могу рекомендовать именно для учебы. Потому что все видео курсы выстроены по примеру, вот я что-то делаю, а ты просто смотришь. Как я и говорил выше, упуская все нюансы, в итоге ты вроде все понимаешь, а сам применить не можешь. Потому что вот как ваш пример с выравниванием, есть нюансы.

Если хотите попробуйте написать отлично преподает материал. В ссылке вшит адрес.

Добавлено через 9 минут
Вот тут можете посмотреть уроки, на опять же я не рекомендую, тут просто используют в целом применимый код, возможно вам понравиться учиться по этим урокам. Удачи!

@sergo5000 · 03.09.2019, 12:15 **[ТС]**

все работает! Смотрите, сама логика выравнивания по горизонтали устроена таким образом, когда блок шире контента, контент выравнивается относительно блока. А когда контент блока равен его ширине, естественно выравниваться относительно чего он будет? Получается относительно своей собственной ширине)?

Я это понимаю, меня интересует как сделать чтобы отступы справа и слева были одинаковыми.

Добавлено через 10 минут

Вот тут можете посмотреть уроки, на опять же я не рекомендую, тут просто используют в целом применимый код, возможно вам понравиться учиться по этим урокам. Удачи!

Спасибо, посмотрю.

@novichek_1905 · 03.09.2019, 12:18

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

Я это понимаю, меня интересует как сделать чтобы отступы справа и слева были одинаковыми.

ну вы сами ответили на свой вопрос, и сделать отступы) Задайте padding: 0 20px;
Или я чего-то не понимаю, с чем вы там боритесь)

@sergo5000 · 03.09.2019, 16:12 **[ТС]**

ну вы сами ответили на свой вопрос, и сделать отступы) Задайте padding: 0 20px;
Или я чего-то не понимаю, с чем вы там боритесь)

Ширина блока изменяется в зависимости от ширины экрана и 20px и даже 20% не при любом разрешении экрана подойдет. И даже если подобрать нужные значения, то при изменении текста опять отступы не будут равными.

@novichek_1905 · 03.09.2019, 16:20

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

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

к сожалению, я не понимаю о каких отступах идет речь, и что вы имеете ввиду. Не очевидна проблема)

@sergo5000 · 03.09.2019, 22:23 **[ТС]**

к сожалению, я не понимаю о каких отступах идет речь, и что вы имеете ввиду. Не очевидна проблема)

Отступ (визуальное расстояние) от границы блока (с красным фоном) до картинки с одной стороны и до текста с другой.

@novichek_1905 · 03.09.2019, 22:28

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

Отступ (визуальное расстояние) от границы блока (с красным фоном) до картинки с одной стороны и до текста с другой.

эмм, то есть этот вариант, не вариант?)

HTML5
1
2
3
4
<div class="box">
  <img src="https://www.placehold.it/240" alt="">
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Там маленький знаках заманивший пунктуация диких семантика решила реторический назад которой не напоивший запятых, свою, пустился точках путь осталось скатился!</p>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
.box{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 10px auto;
  padding: 10px 20px;
  background-color: darkred;
  font: 16px/24px sans-serif;
  color: #fff;
}
 
.box img{
  margin-right: 20px;
}

@sergo5000 · 09.09.2019, 21:51 **[ТС]**

эмм, то есть этот вариант, не вариант?)

Нет.

@novichek_1905 · 10.09.2019, 11:03

sergo5000, а вы можете прислать макет, то как должно выглядеть? Чет ничего не пойму с чем вы боритесь.

@TGreenForest · 10.09.2019, 18:23

Добавьте text-align: center; к тэгу "p"

@sergo5000 · 11.09.2019, 15:24 **[ТС]**

sergo5000, а вы можете прислать макет, то как должно выглядеть? Чет ничего не пойму с чем вы боритесь.

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

Добавлено через 27 секунд

Добавьте text-align: center; к тэгу "p"

Так уже лучше, но недостаточно.

@TGreenForest · 11.09.2019, 15:51

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

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

Набросай макет тут, что бы можно было посмотреть что именно не так https://jsfiddle.net

Перечитав все сообщения возможно вы не совсем понимаете как работает web. Опишите проблему с примерами и кодом

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	02.09.2019, 23:22
	Пруф Миниатюры 1

@sergo5000 0 / 0 / 0 Регистрация: 02.09.2019 Сообщений: 8
	03.09.2019, 00:13 [ТС]
	Выравнивание по горизонтали не работает. В первом случае отступы справа и слева одинаковые. Во втором случае отступ справа есть, а слева нет. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	10.09.2019, 11:03
	sergo5000, а вы можете прислать макет, то как должно выглядеть? Чет ничего не пойму с чем вы боритесь. 0

@TGreenForest 43 / 28 / 15 Регистрация: 20.12.2016 Сообщений: 107
	10.09.2019, 18:23
	Добавьте text-align: center; к тэгу "p" 0