Начальная загрузка выравнивает svg по центру заголовка

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я скопировал этот шаблон карточки из bootstrap для предупреждающей карточки. В заголовке карты я использую svg, который я получил из значков Bootstrap https://icons.getbootstrap.com/icons/exclamation-triangle-fill /. Там вы можете увидеть несколько примеров, где значок реализован правильно. Значок выравнивается точно посередине рядом со следующим. Однако в моем коде значок выровнен внизу и поэтому не центрирован. Есть ли способ это исправить?

  <div class="card" style="width: 18rem;">
    <div class="card-body">
                <div class="mb-3">
                    <h5 class="card-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                        </svg>
                        Warning
                    </h5>
                </div>
                <p class="card-text">
                    Text of card
                </p>

  </div>
</div>

Ответ №1:

Используйте отрицательный margin-top , чтобы настроить его.

Например:

  <div class="card" style="width: 18rem;">
<div class="card-body">
            <div class="mb-3">
                <h5 class="card-title">
                    <svg class="myIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                    </svg>
                    Warning
                </h5>
            </div>
            <p class="card-text">
                Text of card
            </p>
        </div>
    </div>

CSS:

 .myIcon { margin-top: -5px; }

Проверьте это здесь: https://jsfiddle.net/8t61qehn /

1. Это работает, но мне просто интересно, есть ли общее решение для такого рода вещей. Для этого мне нужно знать точные пиксели и измерения. Есть ли решение, которое работало для всех изображений, независимо от того, были ли они 16×16?

Ответ №2:

printf(«%d n», 42); /* Вы можете просто добавить немного css в часть стиля следующим образом: */

    .card-svg {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

/* И добавьте эти стили в качестве классов в свой HTML-код следующим образом: */

 <img class="card-svg" src="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                          <img>
 <h5 class="card-txt">Warning</h5>

/ Кстати, я изменил svg на img, вы можете попробовать так, если это то, что вы хотите./

Ответ №3:

Мой результат

Просто измените первый DIV стиль, text-align: center проверив изображение сверху, убедитесь, что вы хотите, чтобы отображение отображалось, как если бы оно работало для вас.

1. Это было не совсем то, чего я хотел. Вы видите, что изображение все еще выровнено внизу. Один из способов проверить, не центрирован ли он, — это увеличить масштаб страницы. Когда он начинает выглядеть запутанным, он не центрируется.

2. О, теперь я понял .. просто укажите родительский div margin-top = value .. это будет по вашему желанию, центр браузера или другой метод использует свойства FLEXBOX