Pregunta ¿Cómo centro un SVG en un div?


Tengo un SVG que estoy tratando de centrar en un div. El div tiene un ancho de 900px. El SVG tiene un ancho de 400px. El SVG tiene su margen izquierdo y margen derecho establecido en automático. No funciona, solo actúa como si el margen izquierdo fuera 0 (predeterminado).

Alguien sabe mi error?


168
2017-12-26 21:58


origen


Respuestas:


SVG está en línea por defecto. Añadir display: block a eso y luego margin: auto funcionará como se espera


310
2017-12-27 00:01



Las respuestas anteriores no funcionaron para mí. Agregar el atributo preserveAspectRatio="xMidYMin" al <svg> Sin embargo, la etiqueta hizo el truco. los viewBox atributo debe ser especificado para que esto funcione también. Fuente: Red de desarrolladores de Mozilla


21
2018-05-24 08:19



Ninguna de estas respuestas funcionó para mí. Así es como lo hice.

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

14
2017-07-10 19:50



Después de leer arriba que svg está en línea por defecto, acabo de agregar lo siguiente al div:

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

y funcionó el truco para mí.

Puede que a los puristas no les guste (es una imagen, no un texto) pero, en mi opinión, el HTML y el CSS se estropearon y se centraron, así que creo que está justificado.


13
2017-08-07 14:46



Las respuestas de arriba se ven incompletas ya que solo están hablando desde el punto de vista de css.

el posicionamiento de svg dentro de la ventana gráfica se ve afectado por dos atributos svg

  1. viewBox: define el área del rectángulo para cubrir svg.
  2. preserveAspectRatio: definió dónde colocar la viewport wrt viewport y cómo estirarla si la ventana gráfica cambia.

Siga este enlace desde el codepen para una descripción detallada

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

11
2017-07-07 05:39



Asegúrate de que tu css lea:

margin: 0 auto;

Aunque diga que tiene los ajustes de izquierda y derecha en automático, es posible que esté cometiendo un error. Por supuesto, no lo sabríamos porque no nos mostró ningún código.


2
2017-12-26 22:20



Tuve que usar

display: inline-block;

2
2018-01-26 08:30



También puedes hacer esto:

<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>

1
2018-02-21 14:38