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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
<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 : )