垂直對齊引導徽章和文本中的按鈕

.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

垂直對齊引導徽章和文本中的按鈕

回答

相關問題