html - 如何创建一个包含堆叠文本的 div/按钮？

Question

我一直在尝试弄清楚如何在 CSS 中生成它:

但是，到目前为止，当我尝试这样做时，它只是部分步入正轨:

我怎样才能修复下面的 CSS 和 HTML，使其作为堆叠式文本表正常工作？我有 Bootstrap，我正在使用 SCSS/SASS。

具有相同代码(包括完整菜单)的 Pen 显示相同的问题: https://codepen.io/anon/pen/zLYWZR

.buFontSize {
    font-size: 11px;
    padding: 0px;
}

.pointButton {
    display: block;
    border: rgba(255, 255, 255, 0.534) 1px solid !important;
    justify-content: center;
    padding: 0px !important;
}

.buttonBlock {
    display: block;
}

  <nav class="navbar navbar-expand navbar-dark">
  

  <div class="navbar" id="navbarText">
    <a class="navbar-brand navBrand" href="#">Link One</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Link Two</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link Three</a>
      </li>
    </ul>

  <ul class="navbar-nav float-right">
      <span class="btn pointButton">
        <div class="buttonBlock">
            <div class="row">
                <span class="buFontSize">Games</span>
            </div>
            <div class="row">
                <span class="buFontSize">100000</span>
            </div>
        </div>
      </span>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas faSize fa-user-friends"></i></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="far faSize fa-envelope"></i></a>
      </li>
    </ul>      
</div>
  </nav>

Answer 1

您可以使用带有 br 的按钮组:

body {
  background-color: black !important; /* test only */
}

.btn-group .btn {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  line-height:1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <div class="btn">
    Games<br>
    10000
  </div >
  <div class="btn">
    Points<br>
    000000
  </div >
</div>

Example bootply