Ich benutze Google Chrome Inspector und wenn Sie den Vorher-Pseudo des Glyphon wählen, werden Sie sehen, dass rechts ein leerer Platz ist. Wie kann ich das Glyphicon zentrieren?Center Glyphicon Inhalt
Ich habe versucht, Text auszurichten, aber es funktioniert nicht.
<span class="glyphicon glyphicon-plus"></span>
<style>.glyphicon { font-size: 120px; }</style>
Aktualisiert Link jsFiddle 2
gab zentriert sind sicher, kann ich letter spacing für Pseudo-Element ein Es hat den Trick gemacht. Ich habe versucht, die font-size zu ändern, und ich sehe, dass Leerraum nicht erscheint.
.glyphicon:before{
letter-spacing: -0.085em;
}
Arbeits Geige: http://jsfiddle.net/MasoomS/1z79r22y/
Dies ist die beste Antwort bei weitem .. Ich werde es akzeptieren, wird aber eine andere warten einige Tage, um das Kopfgeld zu geben – Almis
einfach die Klasse hinzufügen my-style-icon auf das Symbol und fügen Sie diese zu Ihrem CSS:
.my-style-icon {
font-size: 120px;
display: block;
text-align:center;
}
Die Spannweite ist in der Mitte, aber die vor Pseudo ist nicht (ich sollte das in der Frage erwähnen) – Almis
Bitte geben Sie den vollständigen Code, alles, was ich in der Jsfiddle ist das Symbol HTML und einige nutzlose CSS. – Wazaaaap
Ich habe nicht viel gemacht Ich wollte nur Glyphicon in einer Box zentrieren, aber wegen dieser Pseudo bevor es nicht aussieht, dass es in der Mitte ist. Ich kann Padding oder Rand verwenden, um das zu beheben, aber ich denke, dass es eine bessere Lösung geben könnte. Überprüfen Sie den aktualisierten Link – Almis
vertical-align: middle; margin: 0 auto; sollte den Trick für Sie tun.
nicht funktioniert, können Sie meine jsfiddle aktualisieren? vielleicht mache ich etwas falsch. – Almis
Almis Hallo dort. Ihr Demo-Code verwendet nur nur die span hält das Glyphicon es hat keine Breite zu zentrieren.
Sobald Sie so etwas tun, wird es zentrieren.
<div class="text-center">
<span class="glyphicon glyphicon-plus"></span>
</div>
<br>
<span class="glyphicon glyphicon-plus col-xs-12 text-center"></span>
Hier ist ein Fiddle.
Hallo, Ihr Beispiel ist genau dasselbe wie bei mir, wenn Sie ein Lineal nehmen, werden Sie sehen, dass die y-Achse genau gleich ist. Überprüfen Sie die aktualisierte jsfiddle, um zu sehen, was ich meine – Almis
Hallo, Entschuldigung, ich habe es nicht das erste Mal klar. Re sah dich neue Geige an und ich kann sehen, was du jetzt meinst. Schau dir das an (** FIDDLE **) (http://jsfiddle.net/AngularJR/sps01dsd/3/). Es gibt sogar einen Unterschied zwischen dem Plus-Symbol und dem Minus-Symbol.Der ** Minus ** sieht so aus, als hätte der Platz das linke und das ** Plus ** Symbol den Platz auf der rechten Seite, wie Sie darauf hingewiesen haben. – AngularJR
Ja, ich weiß, wenn wir nichts tun können, dann sollte der Autor dieses Glyphicons es beheben – Almis
Hallo Almis.
.glyphicon {
font-size: 120px;
display: block;
text-align: center;
}
Ersetzen Sie einfach die .glyphicon-Klasse durch den obigen css-Code.
Genießen ..
Wie Sie seine eindeutig ein Problem, vom Autor selbst das Hinzufügen einiger weißer Raum sehen kann, ist der einzige Grund, dies zu beheben ist durch die Breite manuell einstellen.
Sie können von dem leeren Raum auf dem rechten Seite der Glyphe loszuwerden, indem sie mit dem letter-spacing Attribute spielen:
.glyphicon {
font-size: 120px;
letter-spacing: -9px;
}
Ich glaube, das eigentliche Problem hier mit dem SVGs ist, dass das Symbol Schriftart aus gebaut wurde. Ich habe Icon-Schriftarten zuvor aus SVGs erstellt und sah genau dasselbe Verhalten. Wenn das Symbol nicht innerhalb seines SVG viewbox zentriert wäre, würden Sie eine Glyphe bekommen, die nicht zentriert ist, wie Sie es beobachtet haben.
Das Entwickeln einer code-basierten Lösung würde sehr unordentlich werden, da Sie jedes Glyph, das nicht zentriert ist, individuell berücksichtigen müssten, und dann müssten Ihre Offsets relativ zur Größe des Symbols sein, also die Offsets Skalieren Sie mit dem font-size des Symbols. Es ist sicherlich machbar, aber es scheint, als wäre es eine Art von Kopfschmerz.
würde ich eine der folgenden empfehlen:
ich normalerweise verwenden max-width (und Breite, wenn ich alle Symbole in einer Liste wollen die gleiche Größe haben) mit solchen Fragen zu befassen.
Wie pro Ihre jsFiddle:
max-width:222px;
Siehe here.
Der Grund, warum dies nicht anders als durch einen Hack behoben werden kann, ist, dass das Glyphon selbst nicht in seinem eigenen Container zentriert ist, dh wenn es in seiner Matrix entworfen wurde, war es nicht vollständig zentriert.
Sie müssen es mit shivs "oben" hacken (Buchstabenabstand, negativer Rand, usw.) aber es ist Entschließung abhängig.
aber es VERTIKAL-Center können Sie die Polsterung und die Verwendung line-height der Höhe Ihre Behälterhöhe
Verwenden font-awesome zu entfernen, es ist ‚+‘ perfekt zentriert ist, ohne Kerning Probleme. Und verwenden Sie display: flex auf Eltern, in Kombination mit Rand: Auto auf Kind (d. H. Symbol). Es ergibt sich eine perfekte Ausrichtung. Hier ist die jsfiddle (http://jsfiddle.net/Rpad/sps01dsd/13/)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
HTML:
<div class="container">
<div class="row">
<div id="add" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
CSS:
.fa-plus {
margin: auto;
font-size: 10em;
}
#add {
border: 5px dashed black;
border-radius: 25px;
display: flex;
}
Aktualisierte Link http://jsfiddle.net/sps01dsd/1/ – Almis
Es könnte ein Kerning Problem innerhalb der glyphicons Font-Datei sein, wenn Sie ein einzelnen az Zeichen in einem Versuch Inline-Element werden Sie sehen, dass sie korrekt zentriert sind. – Luizgrs
@Luizgrs Sie richtig, ich glaube, die meisten von ihnen sind richtig, aber einige andere nicht, wenn Sie versuchen, Glyphicon minus es noch schlimmer. Ich denke, der einzige Weg ist, manuell einzustellen. Wird auf eine bessere Lösung warten. – Almis