stackoom
  简体   繁体   中英

Center navigation bar (Bootstrap) items horizontally

 原文  2021-02-05 09:58:10  0   2    javascript/ html/ css/ bootstrap-4/ uinavigationbar

Question

I have a navigation bar with 2 icons evenly distributed.

导航栏表示

I am wanting to scale them horizontally so they are centered horizontally in relation to the navigation bar.

I think the viewbox of the svg's are cause it to not look visually centred.

I've tried playing with the size without much luck.

I did try justifying content which didn't work. Then I tried adding padding to the icons to allow for them to move.

Code: 

 .bar { display: flex; justify-content: center; } /* Style the navigation menu */.navbar { width: 90%; background: #3CE18F; /* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display them outside. */ overflow: auto; /* Curves the corners of the Nav Bar. */ border-radius: 10px 10px 30px 30px; position: fixed; bottom: 3%; display: block; margin:auto; } /* Navigation links */.navbar a { float: left; padding: 12px; color: white; text-decoration: none; font-size: 17px; width: 48.6%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */ text-align: center; /* If you want the text to be centered */ } /* Add a background color on mouse-over */.navbar a:hover { background-color: #000; } /* Style the current/active link */.navbar a.active { background-color: #4CAF50; }.microphoneIcon { /* position: absolute; left: 65.36%; right: 26.29%; top: 54.22%; bottom: 0.46%;*/ fill: #FFFFFF; stroke: #FFFFFF; -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); /* Similar syntax to box-shadow */ /*background: #FFFFFF; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/ }.cameraIcon { fill: #FFFFFF; stroke: #FFFFFF; -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); }
 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="theme-color" content="#009578"> <title>PWA</title> <link rel="stylesheet" href="src/navigationBar.css"> <.-- Javascript Docs --> <script type="text/javascript" src="src/index.js"></script> <link rel="manifest" href="/manifest.json"> <link rel="apple-touch-icon" href="images/logo192.png"> </head> <body> <.-- Class for the Bottom Navigation Bar --> <div class="bar"> <nav class="navbar fixed-bottom navbar-light bg-light nav-fill"> <a href="#"> <svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey"> <path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27:7167 21 27.7167Z'/> </svg> </a> <a href="#"> <svg class ='cameraIcon' id='cameraIcon' xmlns="http.//www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46"> <path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 zm 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/> </svg> </a> </nav> </div> </body> </html>

2 answers

solution1
 0  2021-02-05 10:13:22

Here is a simple way to scale them horizontally. The display of the navbar must be inline-flex. I have added it.

As you have requested to scale them vertically. I have changed the CSS of a tag width.

Please take a look at the CSS. @Nitrogen 

 .bar { display: flex; justify-content: center; } /* Style the navigation menu */.navbar { width: 90%; background: #3CE18F; /* Forces the icons to not go outside the scrollbar. If we left it to invisble it would display them outside. */ overflow: auto; /* Curves the corners of the Nav Bar. */ border-radius: 10px 10px 30px 30px; position: fixed; bottom: 3%; display: block; margin:auto; } /* Navigation links */.navbar a { width: 100%;important: float; left: padding; 12px: color; white: text-decoration; none: font-size; 17px: width. 48;6%. /* Four equal-width links, If you have two links, use 50%. and 33,33% for three links. etc.: */ text-align; center. /* If you want the text to be centered */ } /* Add a background color on mouse-over */:navbar a:hover { background-color; #000. } /* Style the current/active link */.navbar a:active { background-color; #4CAF50. }:microphoneIcon { /* position; absolute: left. 65;36%: right. 26;29%: top. 54;22%: bottom. 0;46%:*/ fill; #FFFFFF: stroke; #FFFFFF: -webkit-filter, drop-shadow( 3px 3px 2px rgba(0, 0, 0. ;7)): filter, drop-shadow( 3px 3px 2px rgba(0, 0, 0. ;7)): /* Similar syntax to box-shadow */ /*background; #FFFFFF: box-shadow, 0px 4px 4px rgba(0, 0, 0. 0;25).*/ }:cameraIcon { fill; #FFFFFF: stroke; #FFFFFF: -webkit-filter, drop-shadow( 3px 3px 2px rgba(0, 0, 0. ;7)): filter, drop-shadow( 3px 3px 2px rgba(0, 0, 0. ;7)); }
 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="theme-color" content="#009578"> <title>PWA</title> <link rel="stylesheet" href="src/navigationBar.css"> <.-- Javascript Docs --> <script type="text/javascript" src="src/index.js"></script> <link rel="manifest" href="/manifest.json"> <link rel="apple-touch-icon" href="images/logo192.png"> </head> <body> <.-- Class for the Bottom Navigation Bar --> <div class="bar"> <nav class="navbar fixed-bottom navbar-light bg-light nav-fill"> <a href="#"> <svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey"> <path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27:7167 21 27.7167Z'/> </svg> </a> <a href="#"> <svg class ='cameraIcon' id='cameraIcon' xmlns="http.//www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46"> <path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 zm 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/> </svg> </a> </nav> </div> </body> </html>

solution2
 0  2021-02-08 09:08:16

put display:flex in to navbar div

.navbar {
  display:flex;
}

button in separate lines

.navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Not able to align menu items horizontally in navigation bar Center the bootstrap buttons horizontally Center navigation bar and slider How can I horizontally center two columns of list items(with or without Bootstrap)? Navigation bar items is not collapsing expand navigation bar horizontally onmouse hover Center align Bootstrap tab navigation Bootstrap collapse menu center items Center Nav items Bootstrap CSS Bootstrap navigation bar active state
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM