¿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

Respuestas:

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