Geek Answers Handbook

Aligning the vertical text of the Boottrap btn boot group

I use the btn group for 10 steps of the configuration process.

Here is an example of what I have. http://pixelneering.com/progress-steps.html

Options 4, 5, and 9 are only 1 line and are thus aligned in the middle. I am trying to do all the options vertical-align: top; but not one of the elements responds to this.

So I have HTML, the standard btn group

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

And CSS for btn steps

    .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);
}

This should be a simple CSS fix, but I obviously missed something.

+4
source share
2 answers

A button - , CSS. . . <a> . : https://jsfiddle.net/v9oLtq4e/

+1

, , span . , ( ) .

, vertical-align , . , display: table-cell, , - .

, span button , . , , , .

( ) . , , .

0

More articles:


All Articles