CSS3 flexbox: vertically center two different sized items, but make their top align at the same height

Question

inspired by:

Flexbox - Vertically Center and Match Size

fiddle with the problem: http://jsfiddle.net/Nbknc/22/

what i try to achieve:

I want to get the text of the second button to start at the same height as the text on the first button.

HTML

<section class="buttonsSection">
    <a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
    <a class="button" href="#">Short Phrase</a>
</section>

CSS

.button {
    padding: 10px 15px;
    width: 150px;
    background-color: deepskyblue;
    color: white;
    margin: 3px;
    text-align: top;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.buttonsSection {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    height: 500px;
}

body
{
    width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
    margin: 0 auto;
}

a photo of how i want it to look

EDIT the reason I use flexbox and justify-content is to make it work with different screen sizes. Space is perfectly distributed with flexbox. Adding a padding is suboptimal as it will stay the same, even if the screen has a height of say 200px.

Asons · Accepted Answer · 2016-03-18T07:25:03.290

1

Here is one way, one where I added an extra wrapper that centers

.buttonsSection {
    display: flex;
    flex-direction:column;
    justify-content: center;
    height: 400px;
    border: 1px solid;
    width: 200px;
    margin: 0 auto;
}
.buttonsWrap {
    margin: 30px 0;
    display: flex;
}
.button {
    padding: 50px 15px;
    width: 150px;
    background-color: deepskyblue;
    color: white;
    margin: 3px;
    text-align: top;
}

<section class="buttonsSection">
  <div class="buttonsWrap">
    <a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
    <a class="button" href="#">Short Phrase</a>
  </div>
</section>

edited Mar 18 '16 at 07:25

answered Mar 17 '16 at 20:16

Asons

84,923
12
110
165

I actually used a third Technic, basically read out its exact height value of the bigger ``. Then setting the other button to the same value. This won't work for dynamic sizes, and if changing say fontsize, everything has to be done again. I cannot use your first Technic because it would make it impossible to make things responsive in my case at least. If you remove the padding technic, i'll accept the answer anyway. Consider adding the third (my suggestion) instead. – Toskan Mar 18 '16 at 07:07
@Toskan Removed the padding version. Can you can explain how my first solution can't be responsive?, then I will see if I can find yet another away or maybe add your suggested one. – Asons Mar 18 '16 at 07:31
the problem in my case is that I have a column layout. So the left button is in column1 and the right button in column2. Lets say column 1 exists of a picture, some text, and the button. Same to the right column. Now for mobile phones I put column 2 below column 1. For desktop they are next to each other. Do you get now what I mean? I asked the question of the post wrong actually... button1 and 2 should be in 2 different subcontainers – Toskan Mar 18 '16 at 21:08
@Toskan Well, you can't change the question now, since that would invalidate the answers. Also, that can be trickier with a 2 column layout, still, we need to see the structure to be able to give a proper answer. I suggest you accept the answer that best solve this question and if you want a second alternative, post a new question with new requirements, and drop me a link here if you want me to have a look. – Asons Mar 18 '16 at 21:47

score 1 · Answer 2 · answered Mar 17 '16 at 22:06

1

You can accomplish this by removing the flexbox properties from the button and adding a span around your button text with the following CSS:

position: relative;
top: 50%;
transform: translateY(-50%);

You may need to play with those percentages to get things to line up ideally, but this gets you in the ballpark.

http://codepen.io/angeliquejw/pen/QNdrOZ?editors=0100

answered Mar 17 '16 at 22:06

Angelique

906
7
15

you mean around both buttons. Sadly, that is not possible for me, in my specific applicaiton. But: it would work if I set the second button to the same height as the first (bigger) one and then apply it for each button. – Toskan Mar 18 '16 at 07:10
that is probably the most stable solution cross browser wise. – Toskan Mar 18 '16 at 07:13

Danielson · Answer 3 · 2016-03-18T18:31:49.947

0

Edit: http://jsfiddle.net/Dneilsen22/36yL3y5m/5/

Removing the justify-content for .button and increasing the top padding would accomplish this.

.button {
  padding: 100px 15px;
  width: 150px;
  background-color: deepskyblue;
  color: white;
  margin: 3px;
  text-align: top;

  display: flex;
  flex-direction: column;
}

edited Mar 18 '16 at 18:31

answered Mar 17 '16 at 19:47

Danielson

88
1
8

See c00ki3s answer with "padding-top: 50%;", it will adjust with your screen size. – Danielson Mar 17 '16 at 20:04
same story. The value of padding top 50%, the 50% are related to the size of the element. E.g. if the button text has a height of 100, 50% will be 50px. Agree? this is the same as setting padding-top: 50px;. If the screen has a height of 100px, the button with text 100px, and you add padding-top 50px it wont fit any longer on the screen. That's why flexbox is cool, look it up – Toskan Mar 17 '16 at 20:18
I did look up flexbox, very cool and I'm going to work with it a bit more. I've created a jsFiddle without padding, let me know if that is what you were suggesting in your previous comment. http://jsfiddle.net/Dneilsen22/36yL3y5m/5/ – Danielson Mar 18 '16 at 18:31

Sachin · Answer 4 · 2016-03-17T20:41:52.753

I updated the fiddle Suggest if its not that you require.

http://jsfiddle.net/Nbknc/30/

.button {
padding: 50% 15px 0 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;

}

.buttonsSection {
    margin: 30px 0;
    display: flex;
   flex-direction:row;
    height: 500px;
}

Now its much simpler , now you can add the required padding to your button so that the text in both button will align with equal top padding .

UPDATE
included some changes to your html and css

http://jsfiddle.net/Nbknc/32/

CSS3 flexbox: vertically center two different sized items, but make their top align at the same height

4 Answers4