I was writing a navigation bar and wanted to center some buttons in the navbar. Here is how I did it.
Note that there are many items in nav-bar which is not very good in terms of material design principles (for smaller screens). If there are that many items, it is advisable to put a navigation-drawer inside v-app-bar. But I wanted to get the point across, so here it goes.
<template> <header> <v-app-bar dark> <v-container fluid> <v-row justify="center" align="center" class="navbar_main"> <v-toolbar-items> <v-col> <btn class="navbar_btn"><span class="navbar_btn_text yellow_line">Link 1</span></btn> </v-col> <v-col> <btn class="navbar_btn"><span class="navbar_btn_text pink_line">Link 2</span></btn> </v-col> <v-col> <btn class="navbar_btn"><span class="navbar_btn_text pink_line">Link 3</span></btn> </v-col> </v-toolbar-items> <v-spacer></v-spacer> <v-toolbar-items> <v-col> <btn class="navbar_btn"><span class="navbar_btn_text yellow_line">Link 4</span></btn> </v-col> <v-col> <btn class="navbar_btn"><span class="navbar_btn_text yellow_line">Link 4</span></btn> </v-col> <v-col> <btn class="navbar_btn"><span class="navbar_btn_text pink_line">Link 5</span></btn> </v-col> </v-toolbar-items> </v-row> </v-container> </v-app-bar> </header> </template> <script> export default { } </script> <style scoped> @import url(https://fonts.googleapis.com/css?family=Roboto); *, *:before, *:after{ box-sizing: border-box; } * { margin: 0; padding: 0; border: 0 none; position: relative; outline: none; } .navbar_main{ position: relative; box-sizing: border-box; font-size: 1.2rem; font-weight: normal; color: rgba(0,0,0,.4); } .navbar_btn{ text-decoration: none; margin: 1rem; color: white; padding:0px; font-size: 1rem; width:100%; } .navbar_btn_text{ box-sizing: border-box; color: white; margin: 0px; } .navbar_btn_text::before{ content: ""; box-sizing: border-box; border-radius: 5px; height: 3px; background: #FFFFFF; position: absolute; width: 100%; bottom: 40%; visibility: hidden; transform: scaleX(0); transition: 0.15s linear; } .navbar_btn_text.yellow_line::before{ background: yellow; } .navbar_btn_text.pink_line::before{ background: #FF00FF; } .navbar_btn_text:hover::before, .navbar_btn_text:focus::before{ visibility: visible; transform: scaleX(1);https://tekshinobi.com/wp-admin/post.php?post=279&action=edit# } </style>
Note the line:v-container fill-height
Here fill-height prop is essential for centering, particularly vertical centering.
No Comments
You can leave the first : )