Как настроить SVG в div?

У меня есть SVG, который я пытаюсь центрировать в div. Div имеет ширину или 900 пикселей. SVG имеет ширину 400 пикселей. У SVG есть маржа слева, а margin-right - auto. Не работает, он просто действует так, как будто левое поле равно 0 (по умолчанию).

Кто-нибудь знает мою ошибку?

Ответы

Ответ 1

SVG встроен по умолчанию. Добавьте display: block к нему, а затем margin: auto будет работать как ожидалось.

Ответ 2

Выше ответы не помогли мне. Однако добавление атрибута preserveAspectRatio="xMidYMin" в тег <svg> сделало трюк. Для этого нужно указать атрибут viewbox. Источник: сеть разработчиков Mozilla

Ответ 3

Ни один из этих ответов не работал у меня. Вот как я это сделал.

position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

Ответ 4

Прочитав выше, что svg встроен по умолчанию, я просто добавил в div следующее:

<div style="text-align:center;">

и он помогло.

Пуристам может не понравиться (это изображение, а не текст), но, на мой взгляд, HTML и CSS прикручивают и центрируют, поэтому я считаю, что это оправдано.

Ответ 5

Ответы выше выглядят неполными, поскольку они говорят только с точки зрения css.

Позиционирование svg в окне просмотра зависит от двух атрибутов svg

  • viewBox: определяет область прямоугольника для покрытия svg.
  • preserveAspectRatio: определяется, где разместить viewBox wrt viewport и как его увеличить, если изменения в видовом экране.

Следуйте этой ссылке из codepen для подробного описания

<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">

Ответ 6

убедитесь, что ваш css читает:

margin: 0 auto;

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

Ответ 7

Мне пришлось использовать

display: inline-block;