5

I have two buttons next to each other using flex and I have their contents vertically centered, which work great so far. However, when my site is viewed on mobile pages (using responsive design to scale the page), the second button, which has less text in it becomes a different size than it's companion.

So, the goal is to vertically align the text on my buttons as well as to have the two buttons always match each others size. 

<section class="buttonsSection">
    <a class="button" href="#">Very Long Word</a>
    <a class="button" href="#">Short Phrase</a>
</section>

.button {
    padding: 20px 10px;
    width: 150px;
    background-color: deepskyblue;
    color: white;  
    margin: 3px;
   text-align: center;
}

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

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

JSFiddle: http://jsfiddle.net/Dragonseer/WmZPg/ If the problem isn't obvious right away, try reducing the width of the Result window.

Dragonseer
  • 2,874
  • 7
  • 29
  • 42
  • use the solution I gave you [here](http://stackoverflow.com/questions/19071114/button-link-formatting-center-and-match-width/19071182#19071182) it will work with all resolutions. – avrahamcool Sep 29 '13 at 00:00
  • @acvrahamcool The solution you posted on the other question appears to have the same problem. Try reducing the Result windows of your solution. You will notice that the button on the left is larger in height than the button on the right. Your [JSFiddle](http://jsfiddle.net/avrahamcool/eTvCp/6/). – Dragonseer Sep 29 '13 at 01:52
  • with my solution its just a matter of creating `equal height column` which is pretty easy. but I found a solution to your CSS. – avrahamcool Sep 29 '13 at 04:55
  • 1
    Exact duplicate: http://stackoverflow.com/questions/19063770/how-to-vertically-align-and-stretch-content-using-css-flexbox – cimmanon Sep 29 '13 at 12:09

2 Answers2

10

Solution inspired by this question, was to set the buttonsSection to flex and center, and setting the button to flex, column and center.

See Fiddle here: http://jsfiddle.net/Dragonseer/Nbknc/

.button {
    ...

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

.buttonsSection {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}
Community
  • 1
  • 1
Dragonseer
  • 2,874
  • 7
  • 29
  • 42
  • 2
    this is a nice one.. +1 – avrahamcool Sep 30 '13 at 06:09
  • If the question is a duplicate, and the answer is found in the question it is a duplicate of, the question should be closed rather than copying the answer to the duplicate. – cimmanon Sep 30 '13 at 12:51
  • @cimmanon: The solution to this question wasn't copied from the duplicate, but rather inferred from it. – Dragonseer Sep 30 '13 at 17:17
  • This works great! =) I would just invert the order that .button and .buttonsSection is presented. I would put the container on top and the .button on bottom to avoid confusion. – rafaelbiten Jun 23 '15 at 19:54
2

Just add align-items: stretch; to .buttonsSection

see that Working Fiddle

.buttonsSection {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

also: when using flex you'll have to pay attention to the vendors specific prefix's. read more about it here

Update:

If you're using my original proposal, you can also control the vertical-alignment.

check out this Working Fiddle

HTML: (same) Very Long Word Short Phrase

CSS:

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

.buttonsSection
{
    margin: 30px auto;
    display: table;
    border-spacing: 3px 0;
}


.button
{
    display: table-cell;
    vertical-align: middle;
    padding: 10px 15px;
    background-color: deepskyblue;
    color: white;
    text-align: center;
    max-width: 100px; /*Or any other width you want*/
}
avrahamcool
  • 13,888
  • 5
  • 47
  • 58