Comment puis-je centrer horizontalement un élément de scope dans un div

J’essaie de centrer les deux liens “view website” et “view project” dans la division environnante. Est-ce que quelqu’un peut indiquer ce que je dois faire pour que cela fonctionne?

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

HTML

 

CSS

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

Une option consiste à donner à un affichage du inline-block , puis à appliquer text-align: center; sur le bloc contenant (supprimer é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/

une autre option serait de donner l’ display:table; l’échelle display:table; et centrez-le par la margin:0 auto;

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

L’application de ‘inline-block’ à l’élément à centrer et à l’application text-align: center au bloc parent a fait l’affaire.

Fonctionne même sur les balises .

 
Short text
This is long text

Les scopes peuvent être un peu difficiles à gérer. si vous définissez la largeur de la plage d’apprentissage, vous pouvez utiliser

 margin: 0 auto; 

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

Voici le jsfiddle que je cames avec le dessus de ma tête: jsFiddle

MODIFIER:

La réponse d’Adrift est la solution la plus simple 🙂

Je suppose que vous voulez les centrer sur une ligne et non sur deux lignes distinctes en fonction de votre violon. Si tel 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 enlevé le flotteur car vous voulez le centrer, puis j’ai centré la scope autour des liens en ajoutant une marge: 0 auto. Enfin, j’ai ajouté une largeur statique à la plage. Cela centre les liens sur une ligne dans le div rouge.