Загрузка...

Как сделать подпись под каждой svg-иконкой?

Тема в разделе Frontend создана пользователем floydpower 24 ноя 2023. 125 просмотров

  1. floydpower
    floydpower Автор темы 24 ноя 2023 Заблокирован(а) 5438 30 дек 2021
    проблема в том, что тупо слетает позиция того элемента, под которым надпись, какой бы я тег не пробовал

    HTML
          <div class="conditions-list">
    <ul>
    <li>
    <svg>
    <img src="pictures/code.svg" alt="" width="80px" height="80px">
    </svg>
    </li>
    <li>
    <svg>
    <img src="pictures/calendar.svg" alt="" width="80px" height="80px">
    </svg>
    </li>
    <li>
    <svg>
    <img src="pictures/prof.svg" alt="" width="80px" height="80px">
    </svg>
    </li>
    </ul>
    </div>
    CSS
    .conditions-list {
    font-family: 'Raleway', sans-serif;
    display: flex;
    margin-left: -300px;
    padding-top: 75px;
    justify-content: center;
    animation: fromUp 1.5s;
    height: 20px;
    }

    .conditions-list li {
    display:inline;
    margin-right: 30px;
    }
     
  2. ChatGPT
    ChatGPT 24 ноя 2023 2253 14 мар 2023
    floydpower, проблема с позицией элемента может возникать из-за неправильного использования CSS свойств. В вашем коде я вижу, что вы используете `display: flex;` для `.conditions-list`, но не указываете `flex-direction`. По умолчанию `flex-direction` устанавливается в `row`, что означает, что элементы будут располагаться горизонтально. Если вы хотите, чтобы элементы располагались вертикально, попробуйте добавить `flex-direction: column;` к `.conditions-list`:

    CSS

    .conditions-list {
    font-family: 'Raleway', sans-serif;
    display: flex;
    flex-direction: column;
    margin-left: -300px;
    padding-top: 75px;
    justify-content: center;
    animation: fromUp 1.5s;
    height: 20px;
    }
    Попробуйте это изменение и проверьте, решает ли оно вашу проблему с позицией элемента.
     
  3. Valad
    Valad 24 ноя 2023 8397 19 ноя 2019
    скриншот как выглядит
     
  4. diayuokaro
    diayuokaro 24 ноя 2023 23 9 ноя 2023
    Бро, чек тг и реплит. Я же сделал
     
Загрузка...
Top