CODEWITHSUNDEEP
htmlcssbuttonvertical-alignment
Daniel M.
Daniel M.

Reputation: 15

Vertically align buttons with wrapped text, side by side

I want to show multiple buttons side by side, which is not the problem.
But I have one or more buttons with wrapped text because the button is too small (this should be).

If the text of one button is wrapped, they do not appear correctly side by side.
The button with wrapped text is lower than the other.
What causes this and how can I prevent it?

.container {
  width: 200px;
  border: 1px solid black;
}
button {
  width: 50%;
  height: 40px;
}
<div class="container">
  <button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>

Upvotes: 1

Views: 521

Answers (2)

Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

display:flex on the .container does the trick.

Since you need the buttons to be 50% of its container, it is the best way to go.

.container {
  width: 300px;
  display: flex;
  border: 1px solid black;
}

button {
  flex: 1;
  height: 40px;
}
<div class="container">
  <button>TEST</button><button>TEST WRAPPED TEXT</button>
</div>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

buttons are inline elements which are aligned baseline vertically by default...

...so use vertical-align:top to button...

Stack Snippet

.container {
  width: 200px;
  border: 1px solid black;
}

button {
  width: 50%;
  height: 40px;
  vertical-align: top;
}
<div class="container">
  <button>TEST</button><button>TEST WRAP TEXT</button>
</div>

Upvotes: 2

Related Questions