Comment aligner les caractères verticalement centrés avec du texte dans le fil d'Ariane?

Dennis

J'ai ce fil d'Ariane:

échantillon

Comme vous pouvez le voir, les bons carets restent au top. Non aligné avec le texte verticalement. J'ai essayé de leur donner padding, top, marginmais aucun d'entre eux travaillaient.

body {
  font-family: "Open Sans", "Segoe UI", Halvetica, Arial, sans-serif;
  font-size: 16px;
}
.breadcrumbs {
    display: block;
    margin: 0;
    padding: 0;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.item {
    display: inline-block;
    color: #848c98;
}

.item:not(:last-child):after {
    font-family: "Ionicons";
    margin: 0 .625rem;
    color: #a1a7af;
    content: "\f3d1";
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<ol class="breadcrumbs">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About</a></li>
    <li class="item"><a href="#">Team</a></li>
    <li class="item is-active">Last</li>
</ol>

Voir Live Alternative: https://codepen.io/anon/pen/MxzGXo

Comment puis-je leur donner un rembourrage sur le dessus pour qu'ils s'alignent verticalement avec le texte?

Jennifer Goncalves

Vous allez vouloir aligner verticalement le carat:

https://codepen.io/jgoncalves/pen/OqaZeN

body {
  font-family: "Open Sans", "Segoe UI", Halvetica, Arial, sans-serif;
  font-size: 16px;
}
.breadcrumbs {
    display: block;
    margin: 0;
    padding: 0;
}
ol, ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.item {
    display: inline-block;
    color: #848c98;
}

.item:not(:last-child):after {
    font-family: "Ionicons";
    margin: 0 .625rem;
    color: #a1a7af;
    content: "\f3d1";
    vertical-align: middle; /* this is new */
}
<ol class="breadcrumbs">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About</a></li>
    <li class="item"><a href="#">Team</a></li>
    <li class="item is-active">Last</li>
</ol>

Articles connexes

Aligner à droite le texte dans le fil d'Ariane Bootstrap 4

Adam91 Je veux aligner à droite un lien dans la classe de fil d'Ariane de bootstrap 4. Je l'ai fait assez facilement avec la classe pull-right dans BS3, mais le 'float-right' de BS4 ne fait pas le travail. Par exemple: <nav aria-label="breadcrumb"> <ol class

Le texte est masqué dans la disposition du fil d'Ariane mobile

Nourza Pourquoi certains éléments de la liste ( li) ne ressemblent-ils pas à des flèches lorsque je le teste sur une fenêtre mobile? Il semble qu'une partie du texte disparaisse également, peut-être derrière les triangles de flèches. .breadcrumb { list-style

Comment aligner le texte verticalement dans JavaFX ?

Alyona Je TextAreaen JavaFX. Je dois aligner le texte verticalement ou faire TextAreaen sorte qu'il ait la même taille que le contenu. Actuellement, TextAreagrandit pour remplir sa hauteur parent. Alyona Je l'ai trié en créant un Label, en le plaçant derrière