¿Cómo centro un SVG en un div?

153

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).¿Cómo centro un SVG en un div?

¿Alguien sabe mi error?

Fuente

2011-12-26 Don P

275

SVG está en línea por defecto. Agregue display: block a él y luego margin: auto funcionará como se esperaba.

Fuente

2011-12-27 00:01:47

bastante seguro de que esto también significa que el texto-align: center en el elemento padre también funcionará (funciona para mí en Chrome de todos modos) – Nathan

asegurarse de que su css lee:

margin: 0 auto;

A pesar de que usted está diciendo que tiene el conjunto de izquierda y derecha para auto, puede estar poniendo un error. Por supuesto, no lo sabríamos porque no nos mostró ningún código.

Fuente

2011-12-26 22:20:29

Las respuestas anteriores no me funcionaron. Agregar el atributo preserveAspectRatio="xMidYMin" a la etiqueta <svg> hizo el truco sin embargo. El atributo viewBox debe especificarse para que esto también funcione. Fuente: Mozilla developer network

Fuente

2013-05-24 08:19:51 Esger

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%);

Fuente

2014-07-10 19:50:42 Ryan

no sé por qué, pero tuve que usar 'izquierda: 100%' –

Después de leer por encima de la línea SVG es por defecto, me acaba de agregar lo siguiente a la div:

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

y lo hizo el truco para mí.

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

Fuente

2014-08-07 14:46:55 David

tuve que usar

display: inline-block;

Fuente

2017-01-26 08:30:36

anteriores Respuestas mirada incompleta, ya que están hablando desde el punto de vista sólo CSS.

posicionamiento de SVG dentro de la ventana gráfica se ve afectada por dos SVG atributos

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

Follow this link from codepen for detailed description

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

Fuente

2017-07-07 05:39:25

esto es todo. funcionó perfectamente para mí – warunanc

También puede 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>

Fuente

2018-02-21 14:38:04

¡Gracias Martin, funcionó como un hechizo mágico! –

Respuesta

Cuestiones relacionadas