Align the contents of a button other than the center vertically

Question

Usually people try to figure out how to vertically center things, I want to remove an instance of centered content and align, and I'm stuck.

The content of a button (which is placed in a list in a table cell) is vertically centered by default. How can i remove this? How to align the content of <button> vertically at the top?

 <table> <tbody> <td> <ul> <li> <button> <div>Content</div> 

I have an example on jsFiddle .

 button { display: block; position: relative; background-color: pink; width: 100%; min-height: 200px; } 

 <button> <div>why?</div> <div>are these centered vertically?</div> <div>And how to remove it?</div> </button> 

Answer 1

Why is the content vertically centered?

There is no specific reason. This is how UAs handle the value / content position of buttons (including <button> , <input type="button"> ) ¹ .

How to remove vertical centering?

Well, there is a way to achieve this. First, you need a small background.

But before that, it should be noted that it is assumed that <div> elements are used, where the contents of the stream are . This means that they are NOT allowed to be placed inside <button> elements.

According to the HTML5 specification (which is currently in PR state):

Content model for the button element:
Phrasing content , but there shouldn't be interactive content .

Therefore, valid HTML may be:

 <button> why? <br> are these centered vertically? <br> And how to remove it? </button> 

Background

In a stream stream, line-level elements ( inline , inline-block ) can be vertically aligned inside the vertical-align parent. Using this value with a value other than baseline results in line level elements being located somewhere other than the baseline of the parent (which is the default location).

The key point is that higher elements will affect the line string / baseline .

Decision

First, to handle the position of the strings, we need to wrap them with a wrapper element similar to <span> as follows:

 <button> <span> <!-- Added wrapper --> why? <br> are these centered vertically? <br> And how to remove it? </span> </button> 

In case the parent element - <button> in this case - has an explicit height , if we can have a child element having the same parent height , we could increase the line height of the line and surprisingly make our desired child stream - nested <span> in this case - be aligned vertically by the declaration vertical-align: top; .

10.8 Line Height Calculation: Vertical Alignment Property

This property affects the vertical positioning inside the line string of boxes created by an element of the built-in level.

upper
Align the top of the aligned subtree with the top of the line.

EXAMPLE HERE

 button { width: 100%; height: 200px; } button > span { display: inline-block; vertical-align: top; } button:after { content: ""; display: inline-block; vertical-align: top; height: 100%; } 

Last bot, not least, if you want to use min-height instead of height for button , you should also use min-height: inherit; for a pseudo-element.

EXAMPLE HERE .

---

¹ _{Chrome and Firefox also display the value of the input text vertically in the middle while IE8, for example, does not work.}

Answer 2

Bootstrap adds padding above and below the button content (6 pixels). You can change the fill value using: button{padding:0px;} or button{padding-top:x; padding-bottom:y;} button{padding-top:x; padding-bottom:y;} , where x and y are any value you choose.

If you want to change this button, release the id="table" button or something like that, and then do: button#table{padding:0px;}

If you can avoid using vertical alignment, you should not use all browsers.