html - Bootstrap btn 组垂直文本对齐

Question

我在配置过程的 10 个步骤中使用 btn 组。

这是我目前拥有的示例。 http://pixelneering.com/progress-steps.html

选项 4、5 和 9 只有 1 行，因此居中对齐。我正在尝试使所有选项垂直对齐:顶部；但没有任何元素对此做出回应。

所以我的 HTML，标准 btn 组

<div class="btn-group hidden-xs" style="margin: 9px 0;">
  <button class="btn btn-steps"><span class="step-number">1</span><span class="step-description">Contact<br>Information</span></button>
  <button class="btn btn-steps"><span class="step-number">2</span><span class="step-description">Standard<br>Specifications</span></button>
  <button class="btn btn-steps"><span class="step-number">3</span><span class="step-description">Compressor Frame<br>& Cylinders</span></button>
  <button class="btn btn-steps"><span class="step-number">4</span><span class="step-description">Driver<br></span></button>
  <button class="btn btn-steps"><span class="step-number">5</span><span class="step-description">Air Cooler<br></span></button>
  <button class="btn btn-steps"><span class="step-number">6</span><span class="step-description">Controls, Instrumentation<br>& Wiring</span></button>
  <button class="btn btn-steps"><span class="step-number">7</span><span class="step-description">Vessels <br>& Piping</span></button>
  <button class="btn btn-steps"><span class="step-number">8</span><span class="step-description">Process Gas Valves<br>& Accessories</span></button>
  <button class="btn btn-steps"><span class="step-number">9</span><span class="step-description">Miscellaneous<br></span></button>
  <button class="btn btn-steps"><span class="step-number">10</span><span class="step-description">Configuration<br> Summary</span></button>
</div>

还有 btn-steps 的 CSS

    .btn-steps {
  text-align: left;
  font-size: 11px;
  min-height: 50px;
  background-color: #eeeeee;
  border-color: #eeeeee;
  color: #333;
  vertical-align: top;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #e4e4e4;
  background-image: -moz-linear-gradient(top,#eeeeee,#d5d5d5);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#eeeeee),to(#d5d5d5));
  background-image: -webkit-linear-gradient(top,#eeeeee,#d5d5d5);
  background-image: -o-linear-gradient(top,#eeeeee,#d5d5d5);
  background-image: linear-gradient(to bottom,#eeeeee,#d5d5d5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffd4d4d4', GradientType=0);
  border-color: #d5d5d5 #d5d5d5 #aeaeae;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}

这应该是一个简单的 CSS 修复，但我显然遗漏了一些东西。

Answer 1

A button是 Replaced Element它超出了 CSS 的范围。并且按钮的内容始终居中。你也许可以用一种骇人听闻的方式改变它。但根据您的需要，最好制作 <a>按钮上的标签。看到这个 fiddle :https://jsfiddle.net/v9oLtq4e/