Vertical align the child elements with different height

Question

I am trying to achieve a vertically aligned child elements which have different heights.

Following is what I want to implement. Currently I set a different negative top margin on both buttons. I feel this can be done in a more cleaner way with a single generic ruling. Please share your thoughts.

Following is the code to illustrate the problem:

.container {
  padding: 35px 2px;
  border: 1px solid gray;
}

.title {
  font-size: 18px;
}

.action-button {
  float: right;
  height: 50px;
  width: 100px;

}

.small-screen {
  width: 160px;
  display: inline-block;
}

HTML:

<div class="container">

  <span class="title">
    Card header
  </span>

  <button class="action-button">
    Action
  </button>

</div>

<br/>

<div class="container">

  <span class="title small-screen">
    Card header title here is longer
  </span>

  <button class="action-button">
    Action
  </button>

</div>

Link to JSFiddle

Do u want the text and button to be align vertically center? — Manikandan2811, Feb 18 '20 at 10:51
You have a better solution in this JSFiddle https://jsfiddle.net/b4mcgj1s/12/ — beanic, Feb 18 '20 at 11:06

score 3 · Accepted Answer · edited Feb 18 '20 at 11:26

3

Replace your .container style with.

height: 120px;
display: flex;
border: 1px solid gray;
align-items: center;
justify-content: space-between;

Check the snippet

.container {
  height: 120px;
  display: flex;
  border: 1px solid gray;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 18px;
}

.action-button {
  float: right;
  height: 50px;
  width: 100px;
}

.small-screen {
  width: 160px;
  display: inline-block;
}

<div class="container">

  <span class="title">
        Card header
      </span>

  <button class="action-button">
        Action
      </button>

</div>

<br />

<div class="container">

  <span class="title small-screen">
        Card header title here is longer
      </span>

  <button class="action-button">
        Action
      </button>

</div>

edited Feb 18 '20 at 11:26

johannchopin

13,720
10
55
101

answered Feb 18 '20 at 10:50

Akhil Aravind

5,741
16
35

1

Wow thank you for the super fast response. This is exactly what I was looking for. I had display flex but not the other related CSS. Need to look into the flex thing. have a nice day! – Raul Feb 18 '20 at 10:55
I need to wait for 8 minutes so as to accept. :) – Raul Feb 18 '20 at 10:56
ooh, so my reply was quick :) – Akhil Aravind Feb 18 '20 at 10:58

score 1 · Answer 2 · answered Feb 18 '20 at 10:52

1

Please replace your .container class code to below code

   .container {
    border: 1px solid gray;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border: 1px solid gray;
    }

answered Feb 18 '20 at 10:52

Pratiksha Kale

304
5
13

1

Thanks @Pratiksha, this was helpful, please keep up the good work! – Raul Feb 18 '20 at 11:05

score 1 · Answer 3 · answered Feb 18 '20 at 10:54

You could use absolute positioning instead of floating.

Add the line position: relative to your .container class to make sure that the buttons are positioned within this element.

Then remove the float from the .action-button class and instead add:

margin: 0;
position: absolute;
right: 20px;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);

Here is the full working code snippet:

.container {
  padding: 35px 2px;
  border: 1px solid gray;
  
  position: relative;
}

.title {
  font-size: 18px;
}

.action-button {
  height: 50px;
  width: 100px;
  
  margin: 0;
  position: absolute;
  right: 20px;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}

.small-screen {
  width: 160px;
  display: inline-block;
}

<div class="container">

  <span class="title">
    Card header
  </span>

  <button class="action-button">
    Action
  </button>

</div>

<br/>

<div class="container">

  <span class="title small-screen">
    Card header title here is longer
  </span>

  <button class="action-button">
    Action
  </button>

</div>

@Raul It's from the article [How To Center Elements Vertically](https://www.w3schools.com/howto/howto_css_center-vertical.asp) on w3schools — Run_Script, Feb 18 '20 at 13:28

score 0 · Answer 4 · answered Feb 18 '20 at 10:58

Use display:table along with table-cell with vertical align middle property

.container {
    padding: 35px 2px;
    border: 1px solid gray;
    display: table;
    width: 100%;
    vertical-align: middle;
}

.title {
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
}

.action-button {
    float: right;
    height: 50px;
    width: 100px;
    display: table-cell;
    vertical-align: middle;
}

.small-screen {
  width: 160px;
  display: inline-block;
}

HTML:

<div class="container">

  <span class="title">
    Card header
  </span>

  <button class="action-button">
    Action
  </button>

</div>

<br/>

<div class="container">

  <span class="title small-screen">
    Card header title here is longer
  </span>

  <button class="action-button">
    Action
  </button>

</div>

Vertical align the child elements with different height

4 Answers4