У меня есть SVG, который я пытаюсь центрировать в div. Div имеет ширину или 900px. SVG имеет ширину 400 пикселей. Для SVG поля margin-left и margin-right установлены на auto. Не работает, просто действует так, как будто левое поле равно 0 (по умолчанию).
Кто-нибудь знает мою ошибку?
td
, а неdiv
Выше ответы не сработали для меня. Однако добавление атрибута
preserveAspectRatio="xMidYMin"
в<svg>
тег помогло.viewBox
Атрибут должен быть определен для этой работы , а также. Источник: Сеть разработчиков Mozillaисточник
.container { display: flex; justify-content: center; }
И добавьте класс .container в div, который содержит ваш svg.Прочитав выше, что svg встроен по умолчанию, я просто добавил следующее в div:
и это помогло мне.
Пуристам это может не понравиться (это изображение, а не текст), но, на мой взгляд, HTML и CSS облажались из-за центрирования, поэтому я думаю, что это оправдано.
источник
Ни один из этих ответов не работал для меня. Вот как я это сделал.
источник
left: 100%
Приведенные выше ответы выглядят неполными, поскольку они говорят только с точки зрения CSS.
На позиционирование SVG в области просмотра влияют два атрибута SVG.
Перейдите по этой ссылке от codepen для подробного описания
источник
Я должен был использовать
источник
убедитесь, что ваш CSS читает:
Даже если вы говорите, что для левой и правой стороны установлено значение «Авто», возможно, вы ошиблись. Конечно, мы бы не узнали, потому что вы не показывали нам код.
источник
Вы также можете сделать это:
источник
Поместите ваш код между ними,
div
если вы используете загрузчик :источник
Flexbox - это другой подход: добавьте
.container { display: flex; justify-content: center; }
и добавьте.container
класс в div, который содержит ваш svg.источник
Для меня исправлением было добавить
margin: 0 auto;
элемент, содержащий<svg>
.Как это:
источник