Align the items at the center of a Vue Router Link

I am looking to design a navigation bar that includes router-link items, with each item displaying an icon on the left side and text on the right side.

An example of this design can be seen in the Firebase navigation bar.

https://i.sstatic.net/eg328.png

The navigation bar I created looks like this:

https://i.sstatic.net/UY8MS.png

However, as you may notice, the items are not vertically centered. To demonstrate my code, I have provided a small fiddle with the key file being Navbar.vue.

https://codesandbox.io/s/31jw7ql3ym

Removing the icons solves the vertical centering issue for the text. How can I ensure both the icon and text stay centered when added together?

cssvue.js

Answer №1

Utilize flex properties to achieve the desired layout by applying the following styles to the parent container:

display: flex;
align-items: center;

If you specifically want to target the a element:

Your modified code in Navbar.vue:

a {
  display: block;
  text-decoration: none;
  padding: 10px;
  font-weight: 600;
  color: #b2b4b8;
  transition-property: color, background;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
}

Answer №2

To center content vertically in CSS, you can utilize the vertical-align property

.material-icons{
    vertical-align: middle;
}

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

Utilizing global variables in Vue.js while working with the CLI template

How can I create a global variable in my Vue.js app that is accessible by all components and modifiable by any of them? I am currently utilizing the CLI template. Any recommendations on how to achieve this? Appreciate your assistance. Dhiaa Eddin Anabtaw ...

javascripthtmlvue.jsvuejs2command-line-interface

When HTML is outside of the root web directory, it is unable to access any files

My files for html, css, and javascript are structured within the /www/ directory in their own respective folders (/www/html, /www/css, /www/js). The web root is located at /www/www/ When using the readfile function in my PHP code like this: readfile(" ...

phphtmlcssweb

By incorporating JavaScript, clicking on an image will trigger a shift in the position of a different element

Just starting out with JavaScript and experimenting with creating an event where clicking on an image triggers the movement of another hidden image. The hidden image is positioned off-screen to the left, while there is a table of images in the center of th ...

javascripthtmlcssimage

Overflow on flex layout causes line breaks

I am facing an issue with two divs in a flex container where I want them to be displayed on separate lines when they overflow .container { background: wheat; padding: 10px; width: 300px; display: flex; justify-content: space-betwee ...

css

Modify the default navbar from Bootstrap to display as a fixed navbar

Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...

jqueryhtmlcsstwitter-bootstrap

extracting an attribute from a class's search functionality

Let's consider the following HTML structure: <div id="container"> <div> <div class="main" data-id="thisID"> </div> </div> </div> If I want to retrieve the value inside the data-id attribute ...

javascriptjquerycss

the function fails to run upon clicking the button again

Here is the current function in use: function beTruthful() { if (document.getElementById("about").style.opacity = "0") { document.getElementById("about").style.opacity = "1"; } else { document.getElementById("about").style.opacity ...

javascripthtmlcss

Using TypeScript to test a Vue3 component that includes a slot with Cypress

I'm currently facing challenges setting up a new project. The technologies I am using include Vue3, TypeScript, and Cypress. It seems like the problem lies within the TypeScript configuration. Below is a Minimal Working Example (MWE) of my setup. Any ...

typescriptvue.jsvuejs3cypress

Having trouble generating a Vue project using vue/cli?

I am currently developing a vuex application using Vue CLI. Unfortunately, the CLI gets stuck during metadata fetching (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb88838480828f8a99abd9c5dac5dd">[email protected]</a& ...

node.jsvue.jsnpmvue-cli-3npm-scripts

What is the best way to transform height in pixels to percentage in order to create a responsive design that adjusts smoothly on

Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...

cssresponsive-design

Can you explain the concept of "cascading" within CSS?

Can someone kindly explain the specific definition of "Cascading" in Cascading Style Sheets (CSS)? I have heard conflicting perspectives on this topic, so I am seeking clarification here. Any examples to illustrate would be greatly appreciated. ...

cssterminologycss-cascade

What is the most effective way to use Javascript to update an image depending on the selected value in a dropdown

My JavaScript skills are limited, but I have successfully created a form with 4 drop-down selection boxes on the left side for users to choose from (State, Car, Year, Condition). After making their selections, users can click a 'calculate' butto ...

javascriptjqueryhtmlcss

JavaScript for Dynamic Scaling Animations

I am currently working on animating an SVG button and I am trying to incorporate the transform property with a fadeout using opacity attributes in Javascript. This is how I have attempted to write the code: (Starting with opacity 0 and scale 0) (I am awa ...

javascriptcssattributestransform

Accessing props in setup function in Vue 3

I am encountering issues when trying to access the props value (an array) in my composition API setup. The component I have is called DropDown, and I am passing it an array of objects. Here's what I need to achieve: export default { emits: ['up ...

javascripttypescriptvue.jsvuejs3vue-composition-api

Website experiencing issues with image sizing

On my website, in the Current Books section, I have a row of images. To ensure that all the images are the same height, I initially set the height of the HTML book image to 378 using: <img alt="HTML & CSS" height= "378" src="html.jpg"> Using ...

jqueryhtmlcss

Struggling to perfectly align text in the middle of a div container that also has

Seeking help with aligning text vertically within a div that also contains an image. Previous attempts with CSS properties like vertical-align: center; and line-height:90px have proven ineffective. Removing the image allows for the successful use of line- ...

htmlcsscentering

Adjust remaining vertical space

Trying to design a TailwindCss layout that resembles the following: +----------------------+ | | +-----+----------------+ | | | | | | | | | | | | +-----+------ ...

cssflexboxtailwind-css

Employing negative margin to connect div1 to the left side of div2

Is there a way to attach a dismiss button to the left of a contact in a sidebar? I am trying to achieve a layout similar to the one shown in this image: I attempted using margin-left: -50px; or left: -50px;, but the dismiss div seems to disappear. Even th ...

htmlcssmargin

The picture does not occupy the entire page

Here is a simplified version of my HTML and CSS: @keyframes animatedBackground { from { background-position: 0 0; } to { background-position: 100% 0; } } *{margin:0;padding:0;}/*added as requested*/ .background-image { background-im ...

htmlcss

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

I am working on a Form-Component (SFC) that is supposed to import an HTML file containing Vue components. Form-Component <template src="../../../views/form-settings.html"></template> <script setup> import Button from "./. ...

javascripthtmlvue.jsvue-componentvuejs3