CODEWITHSUNDEEP
htmlcssflexbox
Dragonseer
Dragonseer

Reputation: 2874

Flexbox - Vertically Center and Match Size

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.

Upvotes: 5

Views: 8194

Answers (2)

Dragonseer
Dragonseer

Reputation: 2874

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;
}

Upvotes: 10

avrahamcool
avrahamcool

Reputation: 14094

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*/
}

Upvotes: 2

Related Questions