Comment centrer horizontalement un élément span dans un div ?

Question

J'essaie de centrer les deux liens 'view website' et 'view project' à l'intérieur du div qui les entoure. Quelqu'un peut-il m'indiquer ce que je dois faire pour que cela fonctionne ?

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
}

Answer 1

Une autre option serait de donner à la portée display: table; et le centrer via margin: 0 auto;

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

Answer 2

Une option consiste à donner à l <a> un affichage de inline-block et ensuite appliquer text-align: center; sur le bloc contenant (retirez également le flotteur) :

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/

Answer 3

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

Answer 4

Appliquer inline-block à l'élément qui doit être centré et appliquer text-align:center au bloc parent a fait l'affaire pour moi.

Fonctionne même sur <span> tags.

Answer 5

Les travées peuvent être un peu compliquées à gérer. Si vous définissez la largeur de la travée d'enseignement, vous pouvez utiliser la fonction suivante

margin: 0 auto;

pour les centrer, mais ils se retrouvent alors sur des lignes différentes. Je vous suggère d'essayer une approche différente de votre structure.

Voici le jsfiddle que j'ai inventé de but en blanc : jsFiddle

EDIT :

La réponse d'Adrift est la solution la plus simple :)