The button and heading inside the same div are in different rows

user_17223877 0
Viewed 68

What should be the css to align them in the same line?

<div class="discount-tab">
  <h1 class="discount-heading">Book your first adventure with us at 10% discount</h1>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Book now</button>
</div>
css html
3 Answers

You can set the h1 tag to: display: inline-block. It'll only take up the space it needs that way.

Another approach, which might be even better is to make use of flexbox. Flexbox can align all the items vertically and/or horizontally.

.discount-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
}
user_141663980

You can use FlexBox like this:(here you can read more about FlexBox)

.discount-tab {
  display: flex;
  align-items: center;
}
<div class="discount-tab">
  <h1 class="discount-heading">Book your first adventure with us at 10% discount</h1>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Book now</button>
</div>

user_119779290

You can use grid display: grid; and add styling to button a little.

.discount-tab {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 4fr 1fr;
}

.mdl-button {
  max-width: 100px;
}
<div class="discount-tab">
  <h1 class="discount-heading">Book your first adventure with us at 10% discount</h1>
  <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Book now</button>
</div>

user_137059790
Related