I would like to create a navigation bar with router-link items. Each navigation item should have an icon on the left side and a text on the right side.
An example would be the Firebase navigation bar
My own navigation bar looks like this
and as you can see items are not centered vertically. I created a small fiddle to show my code, the only important file is Navbar.vue
https://codesandbox.io/s/31jw7ql3ym
When I remove the icon the text gets centered well. How can I keep both items centered when adding the icons?
You could do it with flex by adding this to the parent element:
display: flex;
align-items: center;
In your case, by adding it to a element:
Your code in Navbar.vue
a {
display: block;
text-decoration: none;
padding: 10px;
font-weight: 600;
color: #b2b4b8;
transition-property: color, background;
transition-duration: 0.3s;
display: flex;
align-items: center;
}
Use vertical-align property to achieve that in css
.material-icons{
vertical-align: middle;
}
Related
I'm really beginner with CSS and can't figure out how to align bootstrap drop-down buttons horizontally. Here is a code snippet of my project: https://codesandbox.io/s/dreamy-resonance-80id9?file=/src/App.js
The idea is to have them aligned horizontally at the top of the page, with equal space between them and between the borders, so they're spread out.
You just need to change display mode :
.buttonContainer {
background-color: white;
padding: 20px;
text-align: center;
width: 100%;
display: flex;
justify-content: space-evenly;
}
this flex guide can helps you
Here is bootply: https://www.bootply.com/kmfYqoCCLf
there will be black border-top 1px solid in two rows, the problem is that the divs are not same height so they don't create a "one line". how I can make the divs with the border to be same height and centered to the middle same time?
I tried flexbox, but something went probably wrong. It works only if:
.line {
align-items: inherit;
}
but in this case, the content of divs is not in the middle.
Thanks for helping me out
Karolina
Finaly, found it myself:
.line {
align-items: inherit;
}
.line > div {
display: flex;
align-items: center;
justify-content: center;
}
I have the following JS Fiddle here as an example:
Original JS Fiddle:
https://jsfiddle.net/dnovdk47/3/
I am trying to get the nav to be justified with even tabs that fill out equal space of the whole navigation menu. My other problem is I need to have the dropdown width and tab width be the same so that the dropdown lines up with the tab when opened. I was able to achieve this by setting the width of the ul dropdown to 100% and using flex
JS Fiddle with Justified Nav:
https://jsfiddle.net/dnovdk47/5/
CSS
.nav {
display: flex;
width: 100%;
}
.nav li {
background-color: #e3e3e3;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100%;
}
.navbar-inverse .navbar-nav li > a {
height: 45px;
justify-content: center;
align-items: center;
display: flex;
}
.navbar-inverse .navbar-nav li ul {
width: 100%;
}
However, on the Fundamentals tab the dropdown text is larger/too wide and it goes outside of the box.
What I would like is if the tabs could be equal to the width of the dropdown. If it's not doable then maybe just wrap the text to the second line for super long text/elements.
Here is a picture of what I am trying to achieve for all tabs and dropdowns to be even dynamically.
You can add the following css to your dropdown li to break the text into multiple lines.
.dropdown-menu>li>a{
word-wrap: break-word;
white-space: inherit;
text-align: center;
}
JSFiddle: https://jsfiddle.net/dnovdk47/10/
image
codepen
hello, i need help with css styling.
i'm trying to have a responsive main menu,
but cannot figure out a way to keep the text horizontally-centered within the item boxes, once these start to shrink due to low viewport width.
.container {
display: flex;
justify-content: center;
}
this allows for flexible horizontally-centered menu items
.item {
padding: 5px 30px;
text-align: center;
}
what happens is that once the boxes start to shrink, the left padding is preserved while the right one is being "overflow-hidden", which puts the text off-center with respect to their .item containers.
i need the text to stay centered within the item box, while keeping some fixed horizontal padding around the text (enlaring the item box) when width is sufficient.
this is what i tried, but unsurprisingly it didn't work :-)
.item {
width: calc(auto + 60px);
text-align: center;
}
thanks for help
What about using line-height?
Like this http://jsbin.com/capixobihe/1/
#menu ul li {
padding:6px;
margin:0 5px;
font-family:Arial;
line-height:30px; /* <--- Set this */
background-color:#FFF;
display:inline-block;
}
I've created a simple strip on which a text content is placed, which looks like image below.
and the CSS for the same is:
.strip {
display: block;
margin: auto;
float: left;
width: 6em;
height: 2em;
background: #090909;
color: white;
font-weight: bold;
text-align: center;
}
Now, what I'm trying to do is to get Text in the middle of the strip, both horizontally and vertically, while text-align: center helps me to attain horizontal centering of text. I can't get the text vertically centered. Note that my mark is plain <div class="strip">12345678</div> and I'm not willing to use any span within that div. And want to keep markup as clean as possible. How can I attain this behaviour?
Thanks.
Add line-height equal to the height of the div. Check this http://jsfiddle.net/VRBrr/2/
line-height:2em;