Hoe centreer ik een spanelement horizontaal in een div

Ik probeer de twee links ‘view website’ en ‘view project’ in de omringende div te centreren. Kan iemand mij aangeven wat ik moet doen om dit te laten werken?

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
}

Antwoord 1, autoriteit 100%

Eén optie is om de <a>een weergave van inline-blockte geven en vervolgens text-align: center;toe te passen op het bevattende blok (verwijder ook de vlotter):

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/

Antwoord 2, autoriteit 91%

een andere optie zou zijn om de span display:table;te geven en deze te centreren via margin:0 auto;

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

Antwoord 3, autoriteit 7%

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

Antwoord 4, autoriteit 7%

Het toepassen van inline-blockop het element dat gecentreerd moet worden en het toepassen van text-align:centerop het bovenliggende blok deed de truc voor mij.

Werkt zelfs op <span>-tags.

Antwoord 5

Overspanningen kunnen een beetje lastig zijn om mee om te gaan. als u de breedte van de leerspanwijdte instelt, kunt u

margin: 0 auto;

om ze te centreren, maar ze komen dan op verschillende lijnen terecht. Ik raad je aan om een andere benadering van je structuur te proberen.

Hier is de jsfiddle waar ik uit mijn hoofd mee kwam: jsFiddle

BEWERKEN:

Het antwoord van Adrift is de gemakkelijkste oplossing 🙂

Antwoord 6

Ik neem aan dat je ze op één regel wilt centreren en niet op twee afzonderlijke regels op basis van je viool. Als dat het geval is, probeer dan de volgende css:

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

Ik heb de float verwijderd omdat je hem wilt centreren, en heb toen de span rond de links gecentreerd gemaakt door er margin:0 auto aan toe te voegen. Ten slotte heb ik een statische breedte aan de overspanning toegevoegd. Dit centreert de links op één regel binnen de rode div.

Antwoord 7

alleen css div waar u inhoud kunt centreren

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

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