Alignement vertical Bootstrap Badge et du texte Bouton
.test {
height: 58px;
width: 120px;
display: inline-block;
border: solid 1px black;
}<button class="test">
<span>TEXTHERE TEXTHERE</span> <span class="badge">1</span>
</button>Comment faire le badge d'être vertical passant par le texte 2 rangs?
Edit: résultat cible 
S'il vous plaît essayer. J'ai ajouté ce css:
.test .text {
display: inline-block;
vertical-align: middle;
width: 80%;
}
.test {
height: 58px;
width: 120px;
display: inline-block;
border: solid 1px black;
}
.test .text {
display: inline-block;
vertical-align: middle;
width: 80%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="test">
<span class="text">TEXTHERE TEXTHERE</span><span class="badge">1</span>
</button>Cela fonctionne merci! Juste une question, et si c'était un '' au lieu de '
Je veux dire que si j'essaie d'utiliser 'span', tous les enfants ne sont pas alignés verticalement au milieu. Je sais que c'est déjà au-delà de ma question initiale mais je suis simplement curieux :) – Cons7an7ine
Si vous avez utilisé span, donnez-lui 'display: block' ou' display: inline-block'. donc ça fonctionne parfaitement. –
S'il vous plaît .. Essayez cette
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.badge{
margin-left: 80px;
margin-top: -29px;
}
.test {
height: 58px;
width: 130px;
display: inline-block;
border: solid 1px black;
}
.test .text {
display: inline-block;
vertical-align: middle;
width: 80%;
margin-left: -30px;
}
</style>
</head>
<body>
<button class="test">
<span class="text">TEXTHERE TEXTHERE</span><span class="badge">1</span>
</button>
</body>
Quelle est la version bootstrap 3 ou 4? – Rahul
S'il vous plaît nous montrer comment voulez-vous que ce soit (peut-être une image)? – Krusader
J'ai ajouté une photo ci-dessus. :) – Cons7an7ine