button fixed in height with text in multiple rows do not show in same vertical position

Question

button css fixed with height make the vertical position ugly as each button text are more than one row

I tried to comment the height:80px; then all buttons are aligned at top vertically, but all buttons will have different height, bring the BUTTONS GROUP look ugly, especially I need to generate over 10 pieces of button

button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #444;
  width: 120px;
  height:80px !important;
  display:inline-block;
  padding:5px;
  margin: 5px 10px;
  background-color: #fdfdfd;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  border-radius: 3px;
  word-wrap: break-word;
}

<button>Text in one row </button>
<button>Text in more than one row in this button </button>
<button>Text in more than two rows in this button which have same height </button>
<button>Text in more than three rows in this button which have same height, but more text </button>

CLICK to open an image

jsfiddle

How to have buttons fixed in height and all buttons locate vertically-top. Note: each button have different number of words, word-wrap into 1 line, 2 lines, 3 lines...

Answer 1

If you add vertical-align: top; to your button element this will resolve your problem

CSS

button {
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   color: #444;
   width: 120px;
   height: 80px;
   display: inline-block;
   padding: 5px;
   margin: 5px 10px;
   background-color: #fdfdfd;
   border: 1px solid #cdcdcd;
   cursor: pointer;
   border-radius: 3px;
   word-wrap: break-word;
   vertical-align: top;
}

Run the code snippet below to see the result

button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #444;
  width: 120px;
  height: 80px;
  display: inline-block;
  padding:5px;
  margin: 5px 10px;
  background-color: #fdfdfd;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  border-radius: 3px;
  word-wrap: break-word;
  vertical-align: top;
}

<button>Text in one row </button>
<button>Text in more than one row in this button </button>
<button>Text in more than two rows in this button which have same height </button>
<button>Text in more than three rows in this button which have same height, but more text </button>