How to align contents in different columns vertically for Bootstrap?

Question

The codes can be found at:

http://www.bootply.com/Z85ieOd2nu

I tried to create a row contains <h2> inlines with <button>. However, I found they are aligned weirdly in the result..

Does anyone have ideas about this? (How to align all of them in center vertically?)

• Suresh Ponnukalai: try #center h2{margin-top:0px; margin-bottom:0px;}

Answer 1

you can use line-height:70px; in CSS. assign the height of the .row (which in your case it is "70px") to button's CSS and you're done.

http://www.bootply.com/FyZOo7ach4

• Hanfei Sun: Thanks! It works for me. However, when I changed the font size of <h2>, it still looks not perfect.. bootply.com/C3sdH3WSMq#
• Amin Jafari: you need to either give it a fixed height, and equal the line-height to that or calculate the height based on the font size of h2

Answer 2

Bootstrap gives top and bottom margins to h tags. Here also has top and bottom margins but does not have any margin ( that's why it is stuck to the top ).

To resolve this, either remove the margins from tag or provide top and bottom margin to the tag as(in this case):

button {
 margin-top:20px;
 margin-bottom: 10px;
}