垂直对齐引导徽章和文本中的按钮

.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>

如何使徽章是垂直的2行文字对齐？

编辑：目标结果

来源

2017-10-16 Cons7an7ine

什么是引导版本3或4？ – Rahul

请告诉我们你想如何（也许是一些图像）？ – Krusader

我在上面添加了一张图片。 :) – Cons7an7ine

请试试这个。我已经加入这个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>

来源

2017-10-16 08:24:44

此作品谢谢！只有1个问题，如果它是''而不是'

我的意思是如果我尝试使用'span'，所有的孩子都不是垂直对齐的。我知道这已经超出了我最初的问题，但我只是好奇:) – Cons7an7ine

如果你使用了span，那么给它显示：block或display：inline-block。所以它完美的作品。 –

请试试这个..

<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>

来源

2017-10-16 08:41:36

垂直对齐引导徽章和文本中的按钮

回答

相关问题