When the paragraph text is vertically centered within a flexbox, it is targeting the <p> tag. But why does it only center properly when the <p> tag is omitted?

Upon examining the Vuetify code snippet below:

<v-layout align-center justify-center row fill-height>
        <v-flex xs1>
          <v-icon color="primary">clear</v-icon>
        </v-flex>
        <v-flex xs8>
          <p>Text</p>
        </v-flex>
        <v-flex>
          <v-btn rounded color="primary">Do Something!</v-btn>
        </v-flex>
</v-layout>

(for more information: https://codepen.io/anon/pen/xNvzbQ)

The text within "Text" is not vertically centered.

However, by replacing:

<v-flex xs8>
          <p>Text</p>
</v-flex>

with:

<v-flex xs8>
          Text
</v-flex>

the text suddenly becomes centered.

I attempted to center it using align-items: center or align-content: center in the enclosing div without success.

What could be the reason for this behavior?

cssvue.jsvuetify.js

Answer №1

It's actually perfectly centering the p element, as others have noted. The default bottom margin of the p tag may give the illusion that it is not vertically centered.

Refer to the image below for clarification, where the orange highlight represents the bottom margin of the p tag. You can see that it is indeed vertically centered.

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

To address this issue, you can take one of the following actions:

  • Delete the p tag entirely, as you suggested
  • Replace it with a div tag, which does not have a margin
  • Simply adjust the style of the p tag to include margin-bottom: 0

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

Unable to display imported image in React application

I have a component where I want to display an image: import React from 'react' import background from '../media/content-background.jpg' function ContentPage(){ return( <div id="content-page"> < ...

htmlcssnode.jsreactjswebpack

Is it possible for jQuery to execute in a sequential manner?

Below is the code I am working with: https://jsfiddle.net/c4zquo60/1/ CSS: #bg { background-repeat: no-repeat; position: absolute; top:0; bottom:0; left:0; right:0; width:100wh; height:100vh; z-index: -1; opacity: ...

javascriptjqueryhtmlcss

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

What could be causing my code to not align vertically in the Grid layout?

As I delve into developing with React and MaterialUI, a perplexing issue has arisen where elements refuse to align vertically. My expertise lies mostly in backend development, leaving me with minimal knowledge of frontend development nuances, especially co ...

cssreactjsmaterial-uicss-grid

Guide to Efficiently downloading a PDF file using Vue and Laravel

THE SCENARIO: Client Side: Vue. Server Side: Laravel. Within the web application, I need to enable users to download specific PDF files: I require Laravel to retrieve the file and send it back as a response to an API GET request. Then, in my Vue web ap ...

javascriptphplaravelpdfvue.js

What is the best way to align the middle item of a flexbox using CSS?

I am attempting to present text divided into 3 divs - the middle div contains the highlighted portion of the text, while the first and last divs contain the text before and after the highlighted section. Both the first and last flex items have classes tha ...

cssflexboxoverflowbootstrap-5

Cross-Origin Resource Sharing - handling multiple values within the Access-Control-Allow-Origin field

I've been attempting to retrieve data from the Wordpress API within my Vue application. Currently, I am hosting on DigitalOcean with Apache. In order to handle CORS, I added Header set Access-Control-Allow-Origin "*" in my vhost configuration. Howev ...

apachevue.jscorsaxios

CSS animations using keyframes to continuously move text from left to right

I've been experimenting with text animation, and I've noticed that at the end of the animation, there is a sudden transition cut. What I'm aiming for is to have the text continuously shifting. text { animation: scrollText 5s ...

htmlcss

Organizing your project with VueJS, VuelidateJS, and NodeJS/Express for optimal structure

Primarily, I specialize in developing intranet sites and web front-ends for embedded devices using NodeJS. Currently, all my code is contained within one NPM package. I have NodeJS running behind Nginx, allowing Nginx to serve css/image/client-side-javasc ...

javascriptnode.jsexpressvue.jses6-modules

Transition of positions animation

Is there a way to animate the CSS relative position of a div element from left:-260px; to left: -130px; over 0.5s when hovering over it, and have it stay in that position as long as the mouse is on it? Then return to its original position when the mouse mo ...

javascriptcssanimation

What types of HTML are compatible with SweetAlert?

I am exploring the HTML elements that can be used with the SweetAlert alert function (). It seems that headings like h1, h2, etc. and strong tags are allowed, but when I tried to add inline styles like style="color:blue;", the alert stopped working. The v ...

javascriptjqueryhtmlcsssweetalert

When the window size is reduced, the navigation vanishes

Whenever I resize the window, the navigation bar disappears. Here is the image of the page before resizing the window https://i.sstatic.net/UiRB9.png Below is the image after resizing the window https://i.sstatic.net/X00d2.png Displayed below is the cod ...

javascriptvue.jsnuxt.jsvuejs3vuetify.js

Is there a way for me to monitor a prop using the composition api?

Is there a way to trigger a function upon prop update? The parent container structure is as follows: <div> <Maintable :type="typeRef" :country="countryRef" /> </div> And here's the child container code: e ...

vue.jsvuejs3vue-composition-apivue-props

What is the best way to place a parent div above its child element?

I'm currently dealing with a container div styled with background-color: red;. This container has around 12 children, and the last child is set with background-color: blue;. My goal was to position the container on top of the child with the blue backg ...

htmlcssz-index

Setting a default parameter in Vue resource is a straightforward process that involves defining a value

When making ajax requests using token authentication, I am looking to include 'api_token' : 'XYXYXYXYXY' with each request. Is there a method in Vue resource where I can set this globally to avoid adding it to the payload or query param ...

vue.jsvue-resource

Can we send props to subcomponents in Inertia + Vue?

There are two components in my setup: Page.vue Component.vue In my Laravel route, I use: return inertia('Page', [ 'foo' => Model::all()->map(...) ]); Within Page.vue, I have the following code: <template> <Componen ...

laravelvue.jsinertiajs

Incorporating SCSS directly in React component along with material-ui styling

I'm having trouble incorporating styles into my React component. I'd prefer to use SCSS instead of either using the withStyle function or importing a plain CSS file into a JS file. For instance, I would like to import my SCSS file into ButtonCom ...

javascriptcssreactjssassmaterial-ui

Replacing the CSS Reset with the Universal Selector

I implemented Eric Meyer's Reset to set the font, and then loaded my stylesheet to globally set the font using the universal selector. Even though I loaded the universal selector in my SASS after the reset, the reset is still taking precedence. (Atta ...

csscss-selectorscss-reset

Tips for utilizing the vuetify readonly prop while enabling the selection menu

In my project, I have a grid containing v-autocomplete components with the multiple attribute. To maintain clean formatting, I decided to show only a shortened version of the content using the selection slot feature provided below: <v-autocomp ...

javascriptvue.jsvuetify.js

css Repaint the CSS by filtering out list items with odd indexes

Having a list of over 20 items, I utilized the :nth-child(2n+1) selector to alternate the background color (even item in black, odd item in white). However, when using the jQuery Isotope plugin to filter out specific items by adding a .isotope-hidden class ...

jquerycssfiltercss-selectorsjquery-isotope