Is it possible to align a BootstrapVue b-form-checkbox&radio in a vertical center within Vuetify

I'm currently utilizing Vuetify as our primary framework and incorporating some Bootstrap-Vue components such as b-form-checkbox and radio.

I am facing a challenge in trying to vertically center my Bootstrap-Vue checkbox and text. I have attempted several solutions including:

  1. Using vertical-align="baseline"
  2. Applying align="center"
  3. Testing justify="center" (even though it's typically for horizontal alignment)
  4. Utilizing class="align-middle"

The structure of my framework is as follows:

    <v-container>
      <v-card>
        <v-card-text>
          <v-row>
            <v-col>
              <b-form-checkbox>
                ABCD
              </b-form-checkbox>
   ....
    </v-container>

I have tried implementing the solutions within v-col, v-row, and b-form-checkbox, as well as wrapping the checkbox with a span and adding it to the span as well, unfortunately, none of these methods have proven successful.

If anyone has a solution to this, please lend a hand!

cssvue.jsbootstrap-4vuetify.jsbootstrap-vue

Answer №1

It seems like I have what you need:

https://codesandbox.io/s/quizzical-roentgen-hb2i5?fontsize=14&hidenavigation=1&theme=dark

The key is to ensure that the position property is set to relative on the element containing the components you want to vertically center. Then, on the components to be centered, specify that they should start halfway down their parent element and then move up by half of their own height.

You can observe this in the styling of the vertCenterContentContainer class and the vertCenteredContent class within the vue component style.

The crucial parts are:

.vertCenterContentContainer{
  ...
  position: relative;
}

.vertCenteredContent{
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  ...
}

I hope this explanation proves helpful!

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

How can I use CSS to change the background color of a fixed navbar when scrolling?

Is it possible to use only CSS to alter the background color of a fixed navbar once the user has scrolled past a specific point vertically? I am curious if this can be accomplished in CSS by targeting the ID of another element, or possibly its height? Alt ...

htmlcss

A design featuring a two-column layout, with one column remaining static while the other

I just finished putting together a two-column layout. <div class="layout"> <div class="col1"></div> <div class="col2"></div> </div> Check it out here There are a couple of things I'm wondering about: Is t ...

htmlcss

Guide on appending a file to a formData object in vue.js

Having trouble adding the file from the input to the formData object. Even after trying multiple solutions, the object appears to be empty when I log it. Can't seem to figure out what's wrong. File Input: <input class="btn btn-sm btn-rounded ...

javascriptvue.jsvuejs2

Tips for switching back and forth between two classes using jQuery?

I'm having some trouble with the toggleClass function. It doesn't seem to be working correctly for me. The image should toggle between displaying and hiding, but it only changes to hide, not back again. You can view my example here, along with t ...

jqueryhtmlcssclasstoggleclass

What are the steps for effectively utilizing the EmChart to achieve precise font sizes in ems?

Can you explain the intended use of this chart and instructions for how to utilize it? ...

cssxhtmlfontsfont-size

While browsing in Firefox and moving the cursor over a sub element

While hovering over a child element in Firefox using the rule .parent:hover > .child { /*style*/ }, the child element is considered separate from the parent element and does not receive styling. For example, in Firefox when you hover over the button, on ...

htmlcssgoogle-chromefirefox

Determining the percentage between two elements using Bootstrap 4's range slider

I've been searching everywhere but haven't found a solution. I am trying to implement Bootstrap 4.5's range slider to distribute the % difference between Client and Company, ranging from 1% to 100%. However, I am struggling with the jquery/j ...

javascriptjquerybootstrap-4rangepercentage

"Excessive overflow results in the displacement of the following block

When viewing on smaller screens, the blocks move down due to oversized images causing overflow. Is there a way to simulate collision in this scenario? <div class="image"> <img src="img/1.jpg" /> </div> <div class="image"> & ...

htmlcsssass

Creating a PHP Class for Converting CSS3 Rules to Ensure Compatibility Across Different Browsers

Seeking assistance with developing a class that can process a style sheet, identify browser-specific CSS3 rules, and provide compatibility for all browsers. The goal is to simplify the process of writing styles for one browser and then generating CSS files ...

phpcsscross-browser

The Bootstrap Library reference causes the anchor hover function to malfunction

Feeling frustrated after encountering an issue where the Bootstrap button class interferes with the hover function in standard CSS. Decided to create a custom solution by adding a grey box next to the button to display hover information instead of using t ...

htmlcsstwitter-bootstrap

Experiencing the Pause: A Fresh Take on

I'm currently using this slideshow for a project, and I need to understand if it's possible to resume its interval. The current issue is that when you hover over the slideshow, the progress bar stops. But once you remove the mouse, it continues f ...

javascriptjqueryhtmlcssslideshow

clicking on links to different sections of the page does not automatically bring you to the top of

I am working on a design similar to this: http://jsfiddle.net/MTWu5/ The layout consists of a centered page with a sticky header. The header contains menu links that lead to anchors within the page. My issue arises when clicking on these links - I would l ...

htmlcss

Center align the paragraphs with an increasing line length for each line

Is there a way to align a paragraph while increasing the length of each line in a consistent manner? Here is an example from sampleFile.html: <div className="copyright-text"> <p>Can we align a paragraph in a way that the length of each li ...

htmlcssbootstrap-4

Ways to dynamically generate a card using NuxtJS

I'm just starting out with NuxtJS and I'm curious about how to generate a v-card within a v-dialog box. Imagine this scenario: I have an "add" button that triggers a v-dialog, where I can input information into a form. After submitting the form, ...

javascriptvue.jsnpmnuxt.js

Hover Effects for CSS Info Boxes

I have a code snippet below for an info box I am working on. How can I adjust it so that when I hover over it, the green background fills the entire height instead of just 3/4 of the height? Any guidance on what may be causing this issue would be greatly ...

htmlcsshover

What could be causing the appearance of lines above and below my SVG element in the html?

I'm using an SVG to create a curved look on my web page. The SVGs are already in place and look great on desktop screens, but when viewed on mobile, I see small lines appearing above and below the SVG that I want to remove. Here are some pictures of ...

htmlcsssvgbootstrap-5

Elemental SVG Animation

I'm currently exploring the world of animating svg objects using CSS. I have successfully learned how to animate a path with: @keyframes stroke_fill { 0% { fill: white; } 50% { fill: white; stroke-dashoffset: 0; ...

cssanimationsvg

Switch up the current Slick Carousel display by utilizing a div element

We have implemented the slick carousel to show only one slide at a time within the <div class='item__wrapper'>. Beneath this are three items, and we want the slick carousel to update when any of these items are clicked. Issues Using item ...

javascriptjqueryhtmlcssslick.js

Guide on incorporating Bootstrap JS into HTML5 reusable web elements

RESOLVED: the solution is in a comment TL;DR: Issues triggering Bootstrap's JS, likely due to incorrect import of JS scripts I've been working on integrating Bootstrap with my custom reusable web components across all pages. Specifically, I&apo ...

javascripthtmlcsstwitter-bootstrapweb-frontend

What are the steps to add SVG effects to an image or div element?

Embarking on my first venture into using SVG graphics has left me feeling a bit bewildered. Despite extensive research, I have yet to stumble upon the answer to my current quandary. The objective at hand is to transform an image, assuming that the source ...

htmlcsssvgsvg-filters