Ways to center a div within a solo component in Vue.js

.container {
  display: flex;
  justify-content: left;
}

.containertwo {
  display: flex;
  justify-content: right;
}

.center {
  text-align: center
}
<div class="container"> //component1
  <div class="one">some content</div>
</div>
<div class="center"> //middle component
  <div class="middle">middle content</div>
</div>
<div class="containertwo"> //component2
  <div class="two">some content</div>
</div>

I have three different components named as component1, component2, and middlecomponent.

All these components are being loaded in app.vue. I am able to integrate all the components into one single component called App.vue.

However, when it comes to styling using flexbox properties in CSS, I am uncertain about how to align them properly?

htmlcssvue.js

Answer №1

You should consider adjusting your structure. Make sure the container is set to flex and utilize align-items:center for alignment. I have also added a gap between components for spacing.

The unnecessary classes you have included can be removed to simplify the code.

For more information, refer to this helpful link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  align-items: center;
  gap: 40px;
}
<div class="container">
  <div> //component1
    <div class="one">some content</div>
  </div>
  <div class="center"> //middle component
    <div class="middle">middle content</div>
  </div>
  <div class="containertwo"> //component2
    <div class="two">some content</div>
  </div>
</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

Using $app->render() in Slim PHP allows you to specify the relative path to external dependencies

When rendering an actual HTML site that includes external dependencies like JavaScript and CSS using PHP, there may be issues with resolving the dependency paths when using methods such as $app->render("./somewhere/index.html") or simply echoing out the ...

phphtmlrestslim

Issue with web bot functionality

My dynamic database page is filled with an array of hyperlinks. The layout consists of 3 columns: The first column pulls links directly from the database, the second adds a + link to each entry, and the third includes a - link Essentially, every row that ...

asp.netjquerysqlhtmlcss

How come the font size doesn't transfer from the div element to the table element?

I am experiencing an issue with my document presentation. The document is simple and includes HTML and CSS code as well as some text content. When I render the document, I notice that the table element does not inherit the font size from its parent div, un ...

htmlcss

Using Rails to display a set of partials generated by a presenter function

Currently engrossed in watching Railscast on presenters, I find myself eager to refactor one of my presenters to incorporate the page template. The specific screencast that caught my attention is 287-presenters-from-scratch Following the suggested method ...

htmlruby-on-railsrenderpresenter

It appears that the setup function completes its execution before the onMount function is called in Vue 3

createApp({ setup() { let price = 0 onMounted() { // axios price = axios.response } return { price } } }).mount('#app') HTML <h6 id="app" class="mb-0"> ...

javascriptvue.js

How can I center my dynamic CSS3 menu with varying widths?

I am facing an issue with my css menu where the width is set to 400 for non-Admin users and 500 for Admins. The problem arises when I center the menu for Admins by setting the UL width to 500, as it appears off-kilter for non-admin users whose menu is only ...

phphtmlcss

Error: Child component received an undefined prop

Within my parent component, I have three child components. The first child component is a form that, upon submission, passes data to the second and third child components through props via the parent component. However, in one of the child components, the ...

javascriptvue.jsvue-componentvue-props

The Go to Top button functions exclusively on the Homepage

Check out my website: viettech-ca. com Take a look at my code: <div class="wrap footer-nav mgt35"> <ul> <li><a href="bvct/chi-tiet/12/gioi-thieu.html">About Us</a></li> <li><a href="/bvct/chi-tiet/13/dai-ly.ht ...

htmlbutton

designing a unique organizational chart layout with HTML and CSS

I'm facing a challenge in creating a customized organizational chart layout using HTML and CSS. Despite my efforts, I am having difficulties achieving the desired structure that includes parent, child, and grandchild nodes connected in a specific way. ...

htmlcssbootstrap-4responsive-design

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...

javascripthtmlcssanimationprogress-bar

Menu navigation - ensuring the background color extends to cover the entire page, not just the viewport

I'm facing an issue with the left navigation bar's design. Specifically, I'd like the grey color of the bar to extend vertically across the entire page. Currently, the gray bar ends at the viewport's edge. Is there a way to make the ba ...

htmlcssnavigation

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs

What sets the target property of the mousewheel event apart from other events like click, mousedown, and touchstart?

The mousewheel event's target property reveals the DOM element currently being hovered over when using the mousewheel or gesture-capable touchpad. In my experience (specifically in Safari 6, I will verify this in other browsers later), the target ret ...

javascripthtmldomdom-events

The custom attribute in jQuery does not seem to be functioning properly when used with the

I am currently working with a select type that includes custom attributes in the option tags. While I am able to retrieve the value, I am experiencing difficulty accessing the value of the custom attribute. Check out this Jsfiddle for reference: JSFIDDLE ...

javascriptphphtmljquery

The full extent of the background color is not reaching 100% of the height

My content wrapper has a height set to 100%, but the issue is that the background color doesn't fully extend across all content. Here are some images and my code for reference. Any assistance would be greatly appreciated! You can see the white space a ...

htmlcssheightbackground-color

Capture the beauty of Safari with images displayed in the input file element

I'm facing an issue with the file upload element on my website. Most browsers, like Chrome and FF, display the image name when a file is chosen. However, Safari seems to show a tiny thumbnail instead. My goal is to create a custom upload button that ...

htmlcsssafari

What methods could I use to prevent the WYSIWYG buttons from automatically linking?

I've been working on creating an editor but I'm facing a small issue. Every time I click on a button (such as bold or italic), it follows a link instead of performing the desired action. Here's a snippet of what I've tried so far: fu ...

javascripthtml

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

javascripthtmlnode.jsexpressghost-blog

JavaScript Password Form Submission - Enter your password in the form

I need assistance with setting up a password for a form. Users should be able to enter a password into a specified field, click submit, and if the password is correct, they will be redirected to buybutton.php in the same window. If the password is incorr ...

javascripthtmlformspasswords

The display of prime numbers is not functioning in this JavaScript code

I've been diving into JavaScript lately and I'm currently working on displaying prime numbers. However, I'm encountering an issue where the output is not showing up. Can someone lend a hand? I seem to be stuck. Here is my initial code snipp ...

javascriptphphtml