CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
pixelneer
pixelneer

Reputation: 155

Bootstrap btn group vertical text alignment

I am using a btn group for the 10 steps of a configuration process.

Here is a sample of what I have currently. http://pixelneering.com/progress-steps.html

Options 4, 5 and 9 are only 1 line, and thus being aligned in the middle. I am trying to make all options vertical-align: top; but none of the elements respond to that.

So the HTML I have, 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 the CSS for the 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 am clearly missing something.

Upvotes: 4

Views: 2004

Answers (2)

El Devoper
El Devoper

Reputation: 1093

A button is a Replaced Element it's outside the scope of CSS. And the content of a button is always centered. You may be able to change that in a hackish way. But for your needs it would be the best to make <a> tags out of your buttons. See this Fiddle: https://jsfiddle.net/v9oLtq4e/

Upvotes: 1

Josh Burgess
Josh Burgess

Reputation: 9577

If you want them vertically aligned to the middle, simply remove the height from your span elements within each button. When the element is set to the size of its container, it's (by necessity) already vertically aligned.

Keep in mind that vertical-align refers to the element alignment, and not the text alignment within the element. If you're looking for that style behavior, you may want to check out display: table-cell but I don't think that's worked for a while to achieve vertical-alignment of text.

If you want the reverse, simply give the span elements within the button the height equal to the container. Text flow will force the elements to begin at the top, and thus you've achieved your vertical alignment.

In the case of a constrained element (such as yours), this is an easily solvable problem. It becomes more difficult when the content is dynamic, though not terribly difficult.

Upvotes: 0

Related Questions