Wie zentriere ich ein Span-Element horizontal innerhalb eines Div

122

Ich versuche, die beiden Links "Website anzeigen" und "Projekt anzeigen" in der umgebenden Abteilung zu zentrieren. Kann jemand darauf hinweisen, was ich tun muss, damit dies funktioniert?

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
quelle
Siehe auch
Ciro Santilli 法轮功 at 病 六四 事件 法轮功
Hier sind zwei einfache Methoden, um Elemente innerhalb eines Divs vertikal, horizontal oder beides zu zentrieren
Michael Benjamin

Antworten:

134

Eine Möglichkeit besteht darin, den enthaltenen Block <a>anzuzeigen inline-blockund dann auf ihn anzuwenden text-align: center;(entfernen Sie auch den 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/

treiben
quelle
1
Dies war der Trick für mich in einem mäßig komplexen Thema, das ich ein bisschen hacken musste. Der Link zu JSFiddle weiter oben war fantastisch, damit ich testen konnte. Ich habe diesen Eintrag so bearbeitet, dass er "Überlauf: versteckt" in "Überlauf: versteckt" ändert.
zeichnete ..
1
Sieht nach einer sehr sauberen Lösung aus.
Jim Aho
Siehe Ahmed Bahtity Antwort unten, style = "text-align: center", es ist viel prägnanter.
Wallace Howery
141

Eine andere Möglichkeit wäre, die Spanne anzugeben display:table;und über zu zentrierenmargin:0 auto;

span {
display:table;
margin:0 auto;
}
user1721135
quelle
4
Es ist immer wieder interessant, verschiedene Lösungen für dasselbe Problem zu sehen.
Jim Aho
Wird nur von Browsern unterstützt, die in den letzten Jahren aktualisiert wurden. caniuse.com/#feat=css-table
CamHart
1
beste Lösung IMO
Martijn Scheffer
10 
<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>
Ahmed Bahtity
quelle
8

Das Anwenden inline-blockauf das Element, das zentriert werden soll, und das Anwenden text-align:centerauf den übergeordneten Block haben den Trick für mich getan.

Funktioniert auch bei <span>Tags.

Talha Imam
quelle
1

Spannweiten können etwas schwierig zu handhaben sein. Wenn Sie die Breite der Lernspanne einstellen, können Sie diese verwenden

margin: 0 auto;

um sie zu zentrieren, aber sie landen dann auf verschiedenen Linien. Ich würde vorschlagen, einen anderen Ansatz für Ihre Struktur zu versuchen.

Hier ist die jsfiddle, mit der ich oben auf dem Kopf bin : jsFiddle

BEARBEITEN:

Adrifts Antwort ist die einfachste Lösung :)

David Ziemann
quelle
0

Ich gehe davon aus, dass Sie sie auf einer Linie zentrieren möchten und nicht auf zwei separaten Linien, basierend auf Ihrer Geige. Wenn dies der Fall ist, versuchen Sie das folgende CSS:

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

Ich habe den Float entfernt, da Sie ihn zentrieren möchten, und dann die Spanne um die Links zentriert, indem ich ihnen den Rand: 0 auto hinzugefügt habe. Schließlich habe ich der Spanne eine statische Breite hinzugefügt. Dadurch werden die Links in einer Zeile innerhalb des roten Bereichs zentriert.

Duffmaster33
quelle