Come centrare orizzontalmente un elemento span all'interno di un div

123

Sto cercando di centrare i due link "Visualizza sito Web" e "Visualizza progetto" all'interno del div circostante. Qualcuno può indicare cosa devo fare per far funzionare questo?

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
fonte

Correlati: stackoverflow.com/questions/7886460/...

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

Ecco due semplici metodi per centrare gli elementi all'interno di un div, verticalmente, orizzontalmente o entrambi (CSS puro): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

134

Un'opzione è dare <a>una visualizzazione di inline-blocke quindi applicare text-align: center;sul blocco contenitore (rimuovere anche il float):

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/

— alla deriva
fonte

1

Questo ha funzionato per me in un tema moderatamente complesso che avevo bisogno di hackerare un po '. Il collegamento a JSFiddle più in alto è stato fantastico per permettermi di testare. Ho modificato questa voce per includere per cambiare "overflow: hidden" in "overflow: hidden;"

— ha disegnato ..

1

Sembra una soluzione molto pulita.

— Jim Aho,

Vedi la risposta di Ahmed Bahtity di seguito, style = "text-align: center", è molto più concisa.

— Wallace Howery

142

un'altra opzione sarebbe quella di dare lo span display:table;e centrarlo tramitemargin:0 auto;

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

— user1721135
fonte

4

È sempre interessante vedere diverse soluzioni allo stesso problema.

— Jim Aho

Supportato solo su browser aggiornati negli ultimi due anni. caniuse.com/#feat=css-table

— CamHart

1

migliore soluzione IMO

— Martijn Scheffer

10

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

— Ahmed Bahtity
fonte

8

L'applicazione inline-blockall'elemento che deve essere centrato e l'applicazione text-align:centeral blocco genitore ha fatto il trucco per me.

Funziona anche sui <span>tag.

— Talha Imam
fonte

1

Gli intervalli possono diventare un po 'complicati da affrontare. se imposti la larghezza di insegnamento puoi usare

margin: 0 auto;

per centrarli, ma poi finiscono su linee diverse. Suggerirei di provare un approccio diverso alla tua struttura.

Ecco il jsfiddle con cui mi sono imbattuto in cima alla mia testa: jsFiddle

MODIFICARE:

La risposta di Adrift è la soluzione più semplice :)

— David Ziemann
fonte

0

Presumo che tu voglia centrarli su una riga e non su due righe separate in base al tuo violino. In tal caso, prova il seguente css:

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

Ho rimosso il float poiché si desidera centrarlo, quindi ho centrato lo span che circonda i collegamenti aggiungendo margin: 0 auto ad essi. Infine, ho aggiunto una larghezza statica alla campata. Questo centra i collegamenti su una riga all'interno del div rosso.

— Duffmaster33
fonte

0

solo css div puoi centrare il contenuto

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

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

— MrBii
fonte