Question

我正在使用btn组来完成配置过程的10个步骤。

以下是我目前的样本。 http://pixelneering.com/progress-steps.html

选项4,5和9只有1行，因此在中间对齐。我试图使所有选项vertical-align：top;但没有一个元素对此作出回应。

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

button是Replaced Element，它超出了CSS的范围。按钮的内容始终居中。你可能能够以一种黑客的方式改变它。但是根据您的需要，最好从按钮中制作<a>标签。看到这个小提琴：https://jsfiddle.net/v9oLtq4e/

Answer 2

如果您希望它们垂直对齐到中间，只需从每个按钮中的span元素中删除高度即可。当元素设置为其容器的大小时，它（必要时）已经垂直对齐。

请记住，vertical-align是指元素对齐，而不是元素中的文本对齐。如果您正在寻找该样式行为，您可能需要查看display: table-cell，但我认为这不会有一段时间来实现文本的垂直对齐。

如果您想要相反，只需将span元素放在button高度等于容器的位置即可。文本流将强制元素从顶部开始，因此您已经实现了垂直对齐。

对于受约束元素（例如您的元素），这是一个容易解决的问题。当内容是动态的时候变得更加困难，虽然不是非常困难。

Bootstrap btn组垂直文本对齐

2 个答案: