Align the Font Awesome icon and text in the middle vertically within an <a> tag/router-link

My b-button acts as a router-link/a tag, and I can't seem to get the content centered the way I want. I'm aiming for the text to be below my font awesome icon, with both elements aligned both horizontally and vertically, but nothing I've tried has worked.

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

Here is the 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;
    }

Answer №1

Give this a shot :)

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

Here's a simple demonstration -> https://codepen.io/AdamKniec/pen/jObzLRm

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering the error message "value is not defined" when using a React range slider

I recently tried setting up the nodejs react range slider component by following the instructions provided on https://www.npmjs.com/package/react-rangeslider. Despite installing all the necessary dependencies, I keep encountering an error message stating ...

Extract data with Python Selenium

Can someone help me figure out how to extract the value "document sent" from the HTML code below using Python's Selenium library? I've tried the code snippet provided, but it returns None. print(driver.find_element_by_id('errorMessage' ...

What is the best way to delete a jQuery.bind event handler that has been created for an event

I have a div and I need to assign two scroll functions to it, but I also want to remove one of them after a certain condition is met. <div id="div1" class="mydivs"> something </div> <div id="div2">Some crap here</div> <script&g ...

The battle between CSS and jQuery: A guide to creating a dynamic zebra-style table without relying on additional plugins

Is there a better way to create a dynamic zebra styling for table rows while still being able to hide certain elements without losing the styling? In this code snippet, I'm using the CSS :nth-of-type(even) to style even rows but running into issues wh ...

The menu item is having trouble aligning to the right side

Hello, I am currently working on developing a website menu for a project and I am facing an issue with aligning the "Login" Menu item to the right side. Any assistance in resolving this alignment issue would be greatly appreciated. I am also willing to pro ...

The JQuery .replaceWith method exclusively offers unprocessed HTML content

I'm experiencing a minor issue with my ajax response where it returns raw html and does not execute any scripts, resulting in the jquery ui scripts not being executed. Here are some details: I am currently working with ASP.NET MVC and I need to comm ...

Add the bootstrap class to the element only when the screen size meets certain criteria

Is there a method to add a CSS class to an HTML element solely at specific screen size while utilizing bootstrap? An instance would be to implement table-sm to <table> when the viewport is smaller than md size. At present, I have two separate table ...

Would this code effectively disable the right-clicking menu for MathJax?

My current approach involves utilizing the following code snippet: <script type="tet/x-mathjax-config"> MathJax.Hub.Config({ showMathMenu: false }); </script> I intended for this code to disable the right-click menu on my math webs ...

What is the best way to ensure that an image functions as a clickable hyperlink upon hovering over it?

I am facing a challenge in making an image function as a link. Unfortunately, I have identified the problem, but finding a solution is proving to be quite elusive. When the cursor hovers over the image, it undergoes a slight darkening effect and some word ...

Is it possible to change the color of specific days of the week (like Mondays, Tuesdays, etc.) in JQueryUI's datepicker?

Is it possible to customize the appearance of specific weekdays (such as all Mondays, all Tuesdays for the entire year) in the JQueryUI datepicker by changing their color? While there are existing methods to select certain dates and disable holidays, I h ...

What is the best way to align text within both the grid row and column while still maintaining the border?

When I apply justify-self and align-self rules, it successfully centers items vertically and horizontally. However, the issue arises when the borders wrap around the text instead of expanding all the way to the edges. My goal is to have a 1px border aroun ...

Animation displayed on page load before running

Is there a way to ensure that my animation runs smoothly without any lag or jankiness, either while the page is loading or immediately after loading? I have attempted to preload the images using a preload tag in the header of my HTML, but unfortunately, t ...

What is the best way to add a border to the <map coordinates>?

Is there a way to add a border around the active link section of an image defined by coordinates? I have been able to show an outline when the user clicks using outline-color and href, but now I need a default border around the specified coordinates. I am ...

Dynamic Label Editing on ASP Page Using Master Page

I am working on an ASP page with a Masterpage element on my website. The specific functionality I am trying to implement involves having multiple labels with an edit hyperlink next to each one. When the user clicks on the Edit hyperlink, I want the label t ...

Issue with body element displacement when utilizing Bootstrap 5.2 toast component

While utilizing a Bootstrap 5 toast, I noticed that it causes the entire body to shift down. I suspect that there may be an issue with how I am handling relative and absolute positioning attributes, but I am uncertain. This is my first time using Stack Ove ...

SQL stores Array Input as a static identifier 'Array'

Previously, I was able to save an object in the database. However, now I need to save each individual data in an array within a row. I attempted to use array_column to store a specific set of data in a column, but it ended up saving as the word 'Array ...

Issue with setting up Vue Storybook Jest Addon configuration

I am having trouble getting the Vue Storybook configuration to work with the jest addon. I have tried using the global mode as shown below: In Storybook's config.js: import { withTests } from '@storybook/addon-jest'; import results from & ...

Determine the overall price of the items in the shopping cart and automatically show it at the bottom without the need for manual entry

Creating a checkout form that displays the total cost of products, subtotal, GST cost, delivery cost, and overall price. The goal is to calculate the total by adding together the costs of all products with the "price" class (may need ids) at a 15% increase ...

What are some creative ways to generate revenue from my PWA through the Google Play Store, specifically by utilizing Trusted Web

Hey there, I'm currently busy working on a Vuejs (Quasar) PWA and planning to release it on the play store with TWA. I have some concerns about monetization through AdSense. I need to include the Google script in the head tag of my index.html for the ...

Express-minify is having trouble loading the CSS file. If we remove a portion of the file, it should be able

After implementing the express-minify middleware, I encountered an issue with loading the attached CSS file. Even after validating the CSS using an online service, no errors were detected. I attempted to debug by gradually removing elements, and the prob ...