Unable to align span vertically using font-style "Luckiest Guy" in CSS

I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy".
https://i.sstatic.net/Lz8o3.png

I attempted to use

display: flex;align-items: center;
on the span, but it did not work.

App.vue

<template>
  <div id="app">
    <span>Luckiest Guy Font</span>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: grey;
  margin-top: 60px;
  span {
    font-family: "Luckiest Guy", Helvetica, Arial, sans-serif;
    font-size: 19px;
    line-height: 19px;

    display: flex;
    align-items: center;
  }
}
</style>

CodeSandbox:
https://codesandbox.io/s/cool-browser-lh9f8?file=/src/App.vue:441-453

Answer №1

It seems like your code is working fine without any issues. However, there might be other classes affecting this specific tag.

You could also try adding vertical-align:baseline; to the styles of the span tag.

.span-style{
display:flex;
align-items:center;
justify-content:center;
border:1px solid black;
height:40px;
vertical-align:baseline;
}
<div>
<span class="span-style">
Hello world
</span>
</div>

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

Updating a document on Firestore based on a query is a straightforward process that involves first identifying

I'm currently working on a web form page that needs to update input fields into a specific firestore document based on certain conditions. Can anyone provide guidance on how this can be achieved? The initial part where I retrieve the query results se ...

How can we create a touch and mouse-friendly horizontal scrolling navigation pattern?

I am trying to implement horizontal scrolling for video testimonials in a single row on a responsive website, but I am encountering an issue. The width of the container class is larger than col-12, which leaves space and causes horizontal scroll on the pag ...

Tips for sending a JavaScript variable within a div's ID in a Twig loop?

How can I insert a JavaScript variable into the ID of a div inside a Twig loop? Here is my unsuccessful attempt: <script type="text/javascript"> id = 0; </script> {% for element in parent.elements %} <div id="mydiv"> ...

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed

I have created an HTML page with CSS animation and transitions. <div class="container-fluid" id="team"> <div class="row first"> <div class="wrapper"></div> </div> <div class="row second"> <div class="wrapper" ...

Using Regular Expressions in Javascript

I have gone through numerous posts with this title, but so far, none of them have addressed my specific query... My requirement is to utilize regex in the following format: "/^ user provided input $/i". The user can include the special regex character * e ...

I am unable to generate a vite application within WSL

My system is running node version 10.19.0 and npm version 6.14.4. Whenever I try to run create-vite@latest client, I encounter the following error: npx: installed 1 in 0.79s /home/victor/.npm/_npx/86414/lib/node_modules/create-vite/index.js:3 import &apos ...

Arranging SVG icons in a row within the navigation bar

Having trouble aligning the icons side by side? Even with margin and padding adjustments, I couldn't get it right. I've scoured multiple sites for a solution but couldn't find one. As an attempt to fix this, I created a bar with aligned butt ...

Tips for extracting data from arrays with multiple dimensions - (JavaScript)

I am looking to extract string values from a multi-dimensional array and store them in a new array as the answer. For Example : var dimStr = [ "First-one", ["Double-one", "Double-two", "Double-three", ["Triple-one", "Triple-two"] ], "First-two" ] ; The ...

Using jQuery to handle multiple AJAX XML requests

Currently, I am working on developing a JavaScript XML parser using jQuery. The idea is that the parser will receive an XML file containing information along with multiple links to other XML files. As the parser runs, it will identify tags within the file ...

Column Reordering in DataTable Causes Data to be Mapped Incorrectly

I have created a JSBin where you can view the code. However, due to CORS policy restrictions, the ajax URL I used is not functioning properly. The output generated shows that the data is mapped incorrectly in the columns. Can someone please help me figure ...

What sets npm install apart from manual installation?

I've been exploring requirejs recently. I'm trying to decide between installing it using npm install requirejs or manually downloading it from the website. Are there any differences between the two methods? Are there any advantages or disadvantag ...

Navigating between windows in Selenium with Webdriver - Handling unnamed child windows

Currently, I am conducting acceptance testing using webdriver and codeception. This is a relatively new area for me, so your patience is much appreciated. My current challenge involves switching to a child window that pops up after clicking a button: < ...

Laravel and Vue: tackling pagination issues in a Vue.js and Laravel application

I'm struggling with getting Laravel pagination to function properly. Although I attempt to access results from different pages, I find that I can only retrieve the first page. Even when I click on page 2, upon checking the request payload, it always i ...

Display a loading image during the execution of the Exec_Shell Script

Looking to add a loading image while script.sh is executing Check out the code snippet below: <?php if (isset($_POST['restartserver'])) { shell_exec("my-script.sh"); } ?> <html> <body> &l ...

What could be causing the inconsistency in the success rate of my Get request, with it working occasionally but returning a

Why is it that my Get request works on occasion, but most of the time it returns a 404 error? I've been experimenting by removing the "next()" function, but it doesn't make a difference. I've also tried placing "res.json(req.user.firstName) ...

The input element captures the exact x and y coordinates of where the mouse was clicked

I have a requirement to submit a page, and I have opted to utilize the <input> element for this purpose with an image that zooms slightly when hovered over. Due to the unusual nature of my query, I was unable to find any relevant information about t ...

Exploring nested JSON data in Vue.js

In my attempt to access nested JSON within an array using Vue for a simple search functionality, I encountered a problem. Each school is encapsulated in a "hit" array, causing the system to perceive only one result of "hit" instead of returning data for ea ...

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

Steps to save an image to a directory using Vue.js

I am trying to implement an image upload feature to a local folder using Vue.js. How can I achieve this? Currently, I am able to display an image with the following code: <template v-slot:[`item.logo`]="{ item }" > <v-avatar size=&qu ...