CODEWITHSUNDEEP
htmlcss
whitebear
whitebear

Reputation: 12471

When the font-size is different buttons are not aligned

enter image description here

I have same size buttons,I want let them aligned.

<button style="font-size:16px;line-height:16px;width:120px;height:50px;">スピードボート</button>
<button style="font-size:14px;line-height:14px;width:120px;height:50px;">ローラーコースター</button>
<button style="font-size:16px;line-height:16px;width:120px;height:50px;">ふくろう</button>

However font-size is different, the position of button itself is bit defferent.

Why does this happen??

Upvotes: 0

Views: 58

Answers (2)

Tuan Dao
Tuan Dao

Reputation: 2815

You can wrap it by display: flex;

.button {
  width: 120px;
  height: 50px;
  margin: 0 10px;
}

.wrapper {
  display: flex;
}
<div class="wrapper">
  <button class="button" style="font-size:16px;line-height:16px;">スピードボート</button>
  <button class="button" style="font-size:14px;line-height:14px;">ローラーコースター</button>
  <button class="button" style="font-size:16px;line-height:16px;">ふくろう</button>
</div>

Upvotes: 0

j08691
j08691

Reputation: 208040

You need to change the vertical-align property from its default of baseline as two of the three button's text wraps:

button {
  vertical-align: top;
}
<button style="font-size:16px;line-height:16px;width:120px;height:50px;">スピードボート</button>
<button style="font-size:14px;line-height:14px;width:120px;height:50px;">ローラーコースター</button>
<button style="font-size:16px;line-height:16px;width:120px;height:50px;">ふくろう</button>

Upvotes: 1

Related Questions