Центрирование изображений

@mikhail2013ru · Регистрация: 09.02.2019

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

Добрый день!

Одна и та же проблема в каждом макете. Не пойму как на flex отцентрировать изображение? Подгонять на глаз через margin-left мне не нравится. Прикладываю разметку.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="media">
                        <div class="media__balance">
                            <div class="media__img"></div>
                            <p class="media__text">
                                work-life balance
                            </p>
                            <p class="media__subtitles">
                                Proin iaculis purus consequat sem cure <br />
                                digni ssim. Donec porttitora entum suscipit <br />
                                aenean rhoncus posuere odio in tincidunt.
                            </p>
                        </div>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.media
    display: flex
    flex-direction: row
    //outline: 1px solid red
    height: 400px
    justify-content: space-around
    //outline: 1px solid red
    &__balance
        display: flex
        flex-direction: column
    &__img
        background-image: url(/img/Music.png) 
        background-repeat: no-repeat
        height: 91px
        margin-bottom: 50px
    &__text
        font-size: 20px
        font-weight: bold
        text-transform: uppercase
    &__subtitles
        font-size: 15px
        color: $services-font

@Freeze_Breeze · 11.03.2019, 18:36

mikhail2013ru, Это риторический вопрос? Родителю display: flex;, дочернему элементу justify-content: center;

@mikhail2013ru · 11.03.2019, 19:04 **[ТС]**

Родителю display: flex;, дочернему элементу justify-content: center;

display: flex прописан, прописал justify-content: center, изменений не вижу. У меня сама разметка правильная?

@Flaing · 11.03.2019, 20:19

Классу balance задайте

CSS
1
position: relative;

а классу img припишите это:

CSS
1
2
3
4
 position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);

@mikhail2013ru · 11.03.2019, 21:23 **[ТС]**

Родителю display: flex;, дочернему элементу justify-content: center;

flex не сработал, Inline-flex - отцентрировал

Классу balance задайте

position: relative;
а классу img припишите это:

position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);

не заработало

только так работает:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
.media
        height: 400px
        display: flex
        flex-direction: row
        justify-content: space-around
        width: 100%
        &__balance
        &__img
            display: inline-flex
            height: 91px
            width: 91px
            background-repeat: no-repeat

@Academik · 11.03.2019, 21:25

mikhail2013ru, должно сработать:

CSS
1
2
3
4
    &__img
        background: url(/img/Music.png) top center no-repeat
        height: 91px
        margin-bottom: 50px

@mikhail2013ru · 11.03.2019, 21:37 **[ТС]**

И ещё вопрос заодно, я подчистил разметку, вот мой код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div class="container-fluid">
            <p class="values__heading-4">culture &amp; values</p>
            <p class="values__subtitle">Proin iaculis purus consequat sem cure</p>
            
            <div class="media">
                <div class="media__balance">
                    <div class="media__img" style="background-image: url(/img/Music.png);"></div>
                        <p class="media__text">
                            work-life balance
                        </p>
                        <p class="media__subtitles">
                            Proin iaculis purus consequat sem cure <br />
                            digni ssim. Donec porttitora entum suscipit <br />
                            aenean rhoncus posuere odio in tincidunt.
                        </p>
                    </div>
                    
                    <div class="media__balance">
                        <div class="media__img2"></div>
                        <p class="media__text">
                            work-life balance
                        </p>
                        <p class="media__subtitles">
                            Proin iaculis purus consequat sem cure <br />
                            digni ssim. Donec porttitora entum suscipit <br />
                            aenean rhoncus posuere odio in tincidunt.
                        </p>
                    </div>
 
                    <div class="media__balance">
                        <div class="media__img3"></div>
                        <p class="media__text">
                            work-life balance
                        </p>
                        <p class="media__subtitles">
                            Proin iaculis purus consequat sem cure <br />
                            digni ssim. Donec porttitora entum suscipit <br />
                            aenean rhoncus posuere odio in tincidunt.
                        </p>
                    </div>
                </div>
        </div>

В данном примере разметки, если я верстаю на flex, я ведь могу использовать классы bootstrap? И основной момент, сколько раз row должно быть в моём случае, сколько col-md...? Пока не понимаю принцип применения этих классов.

@Academik · 11.03.2019, 21:40

mikhail2013ru, так буцтрап 4 и так флекс использует. Тут посмотрите, понятнее будет https://bootstrap-4.ru/docs/4.2.1/layout/overview/
По центрировании изображений вы пробовали мой код?

@mikhail2013ru · 11.03.2019, 21:50 **[ТС]**

Academik,

По центрировании изображений вы пробовали мой код?

Да, благодарю, способ рабочий, буду применять на практике.

А как вообще лучше, в разметке указывать картинку, или в стилях, если она одна на всю страницу?

@Academik · 11.03.2019, 21:54

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

А как вообще лучше, в разметке указывать картинку, или в стилях, если она одна на всю страницу?

Если это элементы дизайна, то однозначно в стили. В случае если изображение используется в контенте, тогда в коде через тег <img>.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	11.03.2019, 18:36
	mikhail2013ru, Это риторический вопрос? Родителю `display: flex;`, дочернему элементу `justify-content: center;` 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	11.03.2019, 21:40
	mikhail2013ru, так буцтрап 4 и так флекс использует. Тут посмотрите, понятнее будет https://bootstrap-4.ru/docs/4.2.1/layout/overview/ По центрировании изображений вы пробовали мой код? 0