web-dev-qa-db-fra.com

Comment centrer horizontalement un élément d'envergure dans un div

J'essaie de centrer les deux liens 'view website' et 'view project' à l'intérieur de la div environnante. Quelqu'un peut-il 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
}
css
112
J82

Une option consiste à donner à <a> un affichage de inline-block, puis à appliquer text-align: center; sur le bloc conteneur (en supprimant également le flottant):

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/

122
Adrift

une autre option serait de donner le span display:table; et de le centrer via margin:0 auto;

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

L'application de inline-block à l'élément à centrer et l'application de text-align:center au bloc parent ont été très utiles.

Fonctionne même sur les balises <span>.

7
Talha Imam
<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>
7
Ahmed Bahtity

Les portées peuvent devenir un peu difficiles à gérer. si vous définissez la largeur de la durée d'apprentissage, vous pouvez utiliser

margin: 0 auto;

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

Voici le jsfiddle que j’ai rencontré avec ma tête: jsFiddle

MODIFIER:

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

1
David Ziemann

Je suppose que vous voulez les centrer sur une seule 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 supprimé le flottant puisque vous souhaitez le centrer, puis vous avez centré la plage entourant les liens en ajoutant une marge: 0 auto. Enfin, j'ai ajouté une largeur statique à la plage. Cela centre les liens sur une ligne dans la division rouge.

0
Duffmaster33

setting display: flex et flex-direction: row alignera les éléments imbriqués horizontalement.

div {
    display: flex;
    flex-direction: row;
}
0
Prabo