Store the html buttons at the top of the div

Question

The html buttons behave very differently in firefox and chrome. Take this example http://jsfiddle.net/nuu1bfe2/ .

<div> <button>hi</button> <button>hi<br/>you, there</button> </div> 

In firefox, they are placed at the bottom of the parent, and in chrome they are placed at the top. How can I make sure that the buttons are always located at the top.

Answer 1

Using:

 button{ vertical-align: top; } 

demo

Answer 2

You can use vertical-align: top :

A vertical-aligned CSS property indicates the vertical alignment of an inline or table-cell.

upper

Align the top of the element and its descendants with the top of the whole line.

 div button { vertical-align: top; } 

 <div> <button>hi</button> <button>hi <br/>yuo, there</button> </div> 

Link

vertical-align

Answer 3

  <style type="text/css"> button{ vertical-align:top; } </style> 

Add css to your html.