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

Seul le css div permet de centrer le contenu

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

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

Answer 2

Je suppose que vous voulez les centrer sur une ligne et non sur deux lignes distinctes d'après votre tripotage. Si c'est le cas, essayez le css suivant :

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

J'ai supprimé le flotteur puisque vous voulez le centrer, puis j'ai fait en sorte que le span entourant les liens soit centré en lui ajoutant margin:0 auto. Enfin, j'ai ajouté une largeur statique au span. Cela permet de centrer les liens sur une ligne à l'intérieur du div rouge.