I'm using Vue3/Vuetify3, I'm trying to align the text of the app-bar to the center, but for some reason when I try to add text-center to the v-app-bar-title like so:
<div class="d-flex align-center text-center">
and/or I append the text-center on to the div or to the v-container, nothing successfully makes thev-app-bar-title text centered.
I tried one thing that worked, which was removing the existing div classes and just adding text-center, but I'm assuming this will mess with responsiveness since afaik d-flex and align-center are required for it?
Any explanations and/or suggestions would be much appreciated! Thanks in advance!
<v-app>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="d-flex align-center">
<v-avatar
rounded="0"
class="mr-3"
image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
/>
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
You should use the justify-center class to center the content , text-center will center text but not your container if you're using flexbox. You can take a look at this vuetify documentation
Vuetify CSS Flex Helpers
the flexbox helpers override text-center. you can use justify-center with flexbox, or remove the flex classnames and just use text-center
<v-app-bar-title class="pl-0">
<div class="text-center">
<v-avatar
rounded="0"
class="mr-3"
image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
/>
Example Sentence that should be centered
</div>
</v-app-bar-title>
You can simply achieve this requirement by using the margin helper class available here in Vue 3 style documentation.
Live Demo (As facing some challenge to create a below code snippet in Vuetify 3, I am demoing it by using Vuetify 2) :
new Vue({
el: '#app',
vuetify: new Vuetify()
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.13/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.13/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/>
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title class="mx-auto">Page title</v-toolbar-title>
</v-app-bar>
</div>
</v-app>
</div>
Related
I'm using Vue3/Vuetify3, I'm trying to push the text of the v-app-bar about 300px to the right. When I just add a padding to the div element it doesn't do anything. Afaik vuetify works with flexbox, and I'm struggling to understand how to work with this.
Any explanations and/or suggestions would be much appreciated! Thanks in advance!
<v-app>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="d-flex align-center">
<v-avatar
rounded="0"
class="mr-3"
image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
/>
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
Based on the comments I came up with this, it is also responsive. This should just move the text:
<style>
#media (min-width: 600px) {
.app-bar-text {
margin-left: 300px;
}
}
</style>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="app-bar-text">
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
I've looking for a way to place elements between sections, I tried using margins but the elements stay "behind" the next section in the page. What's the CSS property I need to use? I use Tailwind CSS but would like to know what property handles it so I can look about it in the documentation. Also, I'm using components (React / JSX) in my project.
I attached an image for reference.
Thanks!
[Elements inside red square][1]
[1]: https://i.stack.imgur.com/vVLbS.png
try codes below in TailwindCSS playground
hope u get what u want
<div class="bg-sky-400">
<p>test</p>
</div>
<div class="bg-indigo-400">
<div class="absolute z-10 -translate-y-1/2">
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
<div class="inline-block h-4 w-4 rounded-full bg-white"></div>
</div>
<p>hello</p>
</div>
No matter what I seem to try, I cannot align some content in a nav bar in the center of the screen (oh the irony I know!)
# app.vue
<template>
<header>
<ContactBar />
</header>
</template>
# ContactBar.vue
<template>
<nav class="bg-neutral-900 w-100">
<div class="mx-auto p-4 max-w-7xl text-zinc-300">
<p>abc</p>
</div>
</nav>
</template>
Output:
What am I doing wrong here? :(
In the ContactBar.vue you should change w-100 (which is not a standard tailwind class btw) with w-full. Then you need to replace the max-w-7xl on the child by min-w-max w-[80rem]. The w-[80rem] is the replacement of the 7xl max width, which also is 80rem.
See playground example:
https://play.tailwindcss.com/VHSBUxiMx5
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
I created a component named Header with a simple css class:
<template>
<nav
class="flex fixed w-full items-center justify-between px-6 h-16 bg-white text-gray-700 border-b border-gray-200 z-10"
>
<!-- Etc... -->
</nav>
In Home component I registred Header but it is overlapping the home:
<template>
<div class="container">
<Header />
<div class="flex m-5">
<h3>Hello</h3>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
Header: () => import('#/components/Header.vue')
}
}
</script>
The Hello is behind, even including block class in Home component is not worked. Anyone can helped?
There are may ways you could achieve this, but building on the code you already have, you could:
Add a top-0 class to your header. This will ensure that your header which is now positioned fixed will stick to the top of the viewport.
Add a top padding class equavliant to the height of your header (e.g. pt-16) to your container.
Here's a live demo for your reference.
overlapping component each others because of height of your component and in flex height taking automaticly so remove your height
remove css h-16