Comment centrer horizontalement un élément span à l'intérieur d'un div

123

J'essaye de centrer les deux liens «voir le site Web» et «voir le projet» à l'intérieur du div environnant. 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

— J82
source

En relation: stackoverflow.com/questions/7886460/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

Voici deux méthodes simples pour centrer des éléments dans un div, verticalement, horizontalement ou les deux (CSS pur): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

134

Une option consiste à donner <a>un affichage de 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/

— à la dérive
source

1

Cela a fait l'affaire pour moi dans un thème modérément complexe que j'avais besoin de pirater un peu. Le lien vers JSFiddle plus haut était génial pour me permettre de tester. J'ai édité cette entrée pour inclure pour changer "débordement: caché" en "débordement: caché;"

— tirage ..

1

On dirait une solution très propre.

— Jim Aho

Voir la réponse d'Ahmed Bahtity ci-dessous, style = "text-align: center", c'est beaucoup plus concis.

— Wallace Howery

142

une autre option serait de donner la travée display:table;et de la centrer viamargin:0 auto;

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

— utilisateur1721135
source

4

Toujours intéressant de voir différentes solutions au même problème.

— Jim Aho

Uniquement pris en charge sur les navigateurs mis à jour au cours des deux dernières années. caniuse.com/#feat=css-table

— CamHart

1

meilleure solution IMO

— Martijn Scheffer

10

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

— Ahmed Bahtity
source

8

L'application inline-blockà l'élément qui doit être centré et l'application text-align:centerau bloc parent ont fait l'affaire pour moi.

Fonctionne même sur les <span>balises.

— Talha Imam
source

1

Les portées 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érerais d'essayer une approche différente de votre structure.

Voici le jsfiddle que j'ai vu avec le dessus de ma tête: jsFiddle

ÉDITER:

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

— David Ziemann
source

0

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 supprimé le flotteur puisque vous voulez le centrer, puis j'ai centré la plage entourant les liens en leur ajoutant margin: 0 auto. Enfin, j'ai ajouté une largeur statique à la travée. Cela centre les liens sur une ligne dans le div rouge.

— Duffmaster33
source

0

seulement css div, vous pouvez centrer le contenu

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

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

— MrBii
source