Почему мой svg не центрирован внутри контейнера div?

Question

У меня есть следующий код

.services-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.services-container svg {
    width: 70px;
  /*margin: 0 auto;
    display: block; */

}

.services-branding {
    width: 300px;
}

.services-branding figcaption {
    text-align: center;
}

.services-branding p {
    text-align: center;

}

  <div class="services-container">
        <figure class="services-branding">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="120"
            height="124"
            viewBox="0 0 120 124"
          >
            <g>
              <g>
                <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g>
                <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g>
                <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g>
                <g>
                  <path
                    fill="#daeaf2"
                    d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z"
                  />
                </g>
              </g>
            </g>
          </svg>
          <figcaption>branding</figcaption>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh.
          </p>
        </figure>
      </div>

Мой вопрос: почему svg не центрируется, как другие элементы?Это работает, только когда я добавляю в svg display: block и margin: 0 auto, но я не уверен, правильно ли это отцентрировано.Не могли бы вы, ребята, объяснить мне?Спасибо заранее!

Answer 1

Это потому, что text-align: center не будет центрировать <svg>.Вам необходимо применить свойства flexbox к прямому родителю <svg>, который равен .services-branding, как показано ниже:

.services-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.services-container svg {
    width: 70px;
  /*margin: 0 auto;
    display: block; */

}

.services-branding {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.services-branding figcaption {
    text-align: center;
}

.services-branding p {
    text-align: center;

}

<div class="services-container">
        <figure class="services-branding">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="120"
            height="124"
            viewBox="0 0 120 124"
          >
            <g>
              <g>
                <g><path fill="#d84848" d="M120 14H56v66h64L99.844 47z" /></g>
                <g><path fill="#aa1f1f" d="M56 66.75V80l17-11z" /></g>
                <g><path fill="#f57b71" d="M73 69H25L6.656 5H73z" /></g>
                <g>
                  <path
                    fill="#daeaf2"
                    d="M4.436.18a5 5 0 0 1 6.123 3.536l30.54 113.98a5 5 0 0 1-9.658 2.587L.9 6.304A5 5 0 0 1 4.435.18z"
                  />
                </g>
              </g>
            </g>
          </svg>
          <figcaption>branding</figcaption>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
            nonummy nibh.
          </p>
        </figure>
      </div>

Answer 2

Это свойство элементов SVG, их узловые точки (область просмотра и окно просмотра) по стандарту начинаются сверху слева, а не в центре элемента SVG.Вот почему всякий раз, когда вы пытаетесь отцентрировать вектор, он не подходит как изображение.

Вы можете попытаться добавить:

display: block;
margin: auto;

ИЛИ добавить text-align: center; в контейнер<div>

Кроме того, вы можете попробовать попробовать добавить preserveAspectRatio="xMaxYMax meet" к тегу <svg>

Я бы порекомендовал вам использовать в качестве изображений разные размеры вектора и использовать их.в соответствии с вашими потребностями при создании кода вашей страницы, так как в CSS проще манипулировать изображениями, чем векторами.

Дополнительная информация о векторах: https://www.w3schools.com/graphics/svg_intro.asp

И о preserveAspectRatio: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio