Как мне центрировать SVG в div?


254

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

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

Ответы:


461

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


10
почти уверен, что это также означает, что text-align: center на родительском элементе тоже будет работать (в любом случае это работает для меня в Chrome)
Натан

это НЕ работает для меня, но с использованием «встроенного блока» вместо «блока», который работал. Может быть , это потому , что я вставил SVG в td, а неdiv
mathheadinclouds

29

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


7
Мой текущий подход - flexbox. Просто добавьте: .container { display: flex; justify-content: center; }И добавьте класс .container в div, который содержит ваш svg.
Esger

1
Попробуйте добавить еще один ответ с этим новым подходом, чтобы я мог проголосовать за него. Спасибо за вашу помощь!
Крис Питерс

25

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

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

и это помогло мне.

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


Спасибо за это. просто и эффективно. схожу с ума в течение нескольких часов возиться с ViewPort и ViewBox. это добилось цели за считанные секунды. просто заверните эту глупую вещь в div и отцентрируйте ее.
anon58192932

@ anon58192932 - Добро пожаловать. Это глупо просто, но приятно, что это полезно для других, так как я получил много более сложных ответов на вопросы здесь.
Дэвид

20

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

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

3
я не знаю почему, но мне пришлось использоватьleft: 100%
Luís Deschamps Rudge

16

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

На позиционирование SVG в области просмотра влияют два атрибута SVG.

  1. viewBox: определяет область прямоугольника для svg для покрытия.
  2. preserveAspectRatio: определено, где разместить viewBox в области просмотра и как ее растянуть, если область просмотра изменяется.

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

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


4

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

margin: 0 auto;

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


3

Вы также можете сделать это:

<center>
<div style="width: 40px; height: 40px;">
    <svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
        <use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
            <svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
                <path
                    d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
                    />
            </svg>
        </use>
    </svg>
</div>
</center>

2

Поместите ваш код между ними, divесли вы используете загрузчик :

  <div class="text-center ">
  <i class="fa fa-twitter" style="font-size:36px "></i>
  <i class="fa fa-pinterest" style="font-size:36px"></i>
  <i class="fa fa-dribbble" style="font-size:36px"></i>
  <i class="fa fa-instagram" style="font-size:36px"></i>
  </div>

2

Flexbox - это другой подход: добавьте .container { display: flex; justify-content: center; }и добавьте .containerкласс в div, который содержит ваш svg.


0

Для меня исправлением было добавить margin: 0 auto;элемент, содержащий <svg>.

Как это:

<div style="margin: 0 auto">
   <svg ...</svg>
</div>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.