¿Cómo centro horizontalmente un elemento span dentro de un div?

123

Estoy tratando de centrar los dos enlaces 'ver sitio web' y 'ver proyecto' dentro del div circundante. ¿Alguien puede señalar lo que necesito hacer para que esto funcione?

JS Fiddle: http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

css

— J82
fuente

Relacionado: stackoverflow.com/questions/7886460/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

Aquí hay dos métodos simples para centrar elementos dentro de un div, verticalmente, horizontalmente o ambos (CSS puro): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

134

Una opción es <a>mostrar inline-blocky luego aplicar text-align: center;en el bloque contenedor (eliminar el flotador también):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

— a la deriva
fuente

1

Esto me sirvió en un tema moderadamente complejo que necesitaba hackear un poco. El enlace a JSFiddle más arriba fue increíble para permitirme probar. Edité esta entrada para incluir el cambio de "desbordamiento: oculto" a "desbordamiento: oculto";

— dibujó ...

1

Parece una solución muy limpia.

— Jim Aho

Vea la respuesta de Ahmed Bahtity a continuación, style = "text-align: center", es mucho más conciso.

— Wallace Howery

142

otra opción sería dar el tramo display:table;y centrarlo a través demargin:0 auto;

span {
display:table;
margin:0 auto;
}

— usuario1721135
fuente

4

Siempre es interesante ver diferentes soluciones a un mismo problema.

— Jim Aho

Solo es compatible con navegadores actualizados en los últimos años. caniuse.com/#feat=css-table

— CamHart

1

la mejor solución OMI

— Martijn Scheffer

10

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

— Ahmed Bahtity
fuente

8

Aplicar inline-blockal elemento que se va a centrar y aplicartext-align:center al bloque principal funcionó para mí.

Funciona incluso en <span>etiquetas.

— Talha Imam
fuente

1

Los intervalos pueden ser un poco difíciles de manejar. si establece el ancho del intervalo de aprendizaje, puede usar

margin: 0 auto;

para centrarlos, pero luego terminan en diferentes líneas. Sugeriría probar un enfoque diferente a su estructura.

Aquí está el jsfiddle que se me ocurrió en la parte superior de mi cabeza: jsFiddle

EDITAR:

La respuesta de Adrift es la solución más fácil :)

— David Ziemann
fuente

0

Supongo que desea centrarlos en una línea y no en dos líneas separadas según su violín. Si ese es el caso, intente el siguiente CSS:

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

Eliminé el flotador ya que desea centrarlo, y luego hice que el intervalo que rodea los enlaces se centre agregando margin: 0 auto a ellos. Finalmente, agregué un ancho estático al tramo. Esto centra los enlaces en una línea dentro del div rojo.

— Duffmaster33
fuente

0

solo css div puedes centrar el contenido

div{
       display:table;
       margin:0 auto;
    }

http://jsfiddle.net/4q2r69te/1/

— MrBii
fuente