Solution 1 :

Try that 🙂

.main-navigation-button primary-custom-color {
display:flex;
flex-direction:column;
justify-content: center;
align-items:center
}

small example -> https://codepen.io/AdamKniec/pen/jObzLRm

Problem :

I have a b-button which is basically a router-link/a tag which contents i’d like to center. I want the text to be underneath my font awesome icon and both of them should be horizontally and vertically centered but nothing seems to work.

     <b-button variant="primary" class="main-navigation-button primary-custom-color"
                          :to="{name: 'companyCarList'}">
          <i class="fas fa-car fa-4x icon-full-width"></i> 
          Text
     </b-button>

Style of my button:

 .main-navigation-button {
        border: solid 1px transparent;
        border-radius: 1rem;
        box-shadow: 3px 3px 5px #ccc;
        font-size: 2vmax;
        margin-bottom: 20px;
        width: 15vw;
        height: 15vw;
        min-width: 150px;
        min-height: 150px;
    }

Comments

Comment posted by Deepu

Can you try adding vertical-align:middle; with .main-navigation-button class

Comment posted by Rugo

@Deepu thies doesnt seem to change anything

Comment posted by Rugo

This does center my content but my buttons arent responsive any more, if I change the width of my screen they arent centered anymore. I havent used flex before, do I need to add something to my outer div to ensure that my buttons remain centered inside it? My buttons are each inside a column which are inside a row

Comment posted by AdamKniec

try adding display:flex; justify-content:center to the buttons on the parent

By

Leave a Reply

Your email address will not be published. Required fields are marked *