Cómo puedo centrar horizontalmente un elemento span dentro de un div

Estoy tratando de centrar los dos enlaces 'ver sitio web' y 'ver proyecto' dentro del div circundante. ¿Puede alguien señalar lo que tengo que 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
}
 95
css
Author: J82, 2013-05-10
Source

6 answers

Una opción es dar a <a> una visualización de inline-block y luego aplicar text-align: center; en el bloque contenedor (también elimine el flotador): 

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 /

 104
Author: Adrift,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-15 07:28:50

Otra opción sería dar el span display:table; y centrarlo a través de margin:0 auto; 

span {
display:table;
margin:0 auto;
}
 114
Author: user1721135,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-27 07:14:16

Aplicar 'inline-block' al elemento que se va a centrar y aplicar text-align:center al bloque padre hizo el truco para mí.

Funciona incluso en etiquetas <span>.

 7
Author: Talha Imam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-15 20:03:29 
<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>
 3
Author: Ahmed Bahtity,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-06 14:55:31

Los tramos pueden ser un poco difíciles de tratar. si se establece el ancho de teach span se puede utilizar

margin: 0 auto;

Para centrarlos, pero luego terminan en líneas diferentes. Yo sugeriría intentar un enfoque diferente a su estructura.

Aquí está el jsfiddle con el que me levanto en la parte superior de mi cabeza: jsFiddle

EDITAR:

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

 0
Author: David Ziemann,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-10 20:05:12

Asumo que quieres centrarlos en una línea y no en dos líneas separadas basadas en tu violín. Si ese es el caso, pruebe 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 el intervalo que rodea los enlaces centrados 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.

 0
Author: Duffmaster33,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-10 20:05:52