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
Related
Still quite a newbie and would appreciate some guidance as this keeps happening on my projects.
I create a nav bar using display: flex - I think I have center aligned everything, but it's moving off to the right.
I was expecting the nav to be center aligned because of the following properties.
.navlist {
display: flex;
justify-content: center;
}
.navlist li {
padding: 20px;
list-style-type: none;
text-align: center;
}
But I get slightly off centre result
Please check my codepen
I've also tried margin: auto but still can't figure it out!
Thanks in advance
Add the following code in your CSS and it should work fine.
.navlist li:first-child {padding-left: 0;}
The reason your nav is a little off-center is that it is adding left padding of 20px based on your code so the nav shifts 20px towards the right.
Hope this answer is helpful!
Added a slight change to your code, see if it is what you're expecting
.navlist {
display: flex;
justify-content: center;
text-align: center;
padding-left: 0;
}
I cant get this too work. Im using react and styled components and my justify/aligning isnt working.
div - set to flex, flex-direction is column
div - header div
div - body div, flex grow set to 1 so that the flexbox takes up the full height of the container
Now the flex item for the body takes up the full height (good) and im trying to center the content in the middle of this div. I have tried all combinations of align/justify on both the parent and body div but it doesnt work and im not sure why.
Heres my code
const Div = styled.div`
display: flex;
flex-direction: column;
min-height: 100vh;
justify-items: center;
& > * :nth-child(2){
flex-grow: 1;
background-color: red;
/* position:relative; */
/* align-self: center; */
}
`
const OuterWrapper = styled.div`
padding: 10vw 1.5rem;
overflow: hidden;
// this is the div that contains content that i want to center
Can anyone see why its not working?
On your wrapper:
display: flex;
justify-content: center;
align-items: center;
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;
}
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;
}
This should be so simple, but I cannot figure it out...
http://www.coelandscapes.co.uk/ is a quite an old site, with a simple CMS. I'm trying to get the menu to vertically align with the bottom of the logo, but can't use absolute (because the number of elements might change).
Does anyone have any ideas?
Thanks
flexbox is great for vertically aligning items. Add this to your #menu style:
#menu {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
width: 610px;
height: 245px;
padding: 0 0 0 12px;
}
You might have to add some vendor prefixes depending on what browser you want to support: http://caniuse.com/#search=flex
Just put position:relative on the parent and the child should have this css:
position: absolute;
top: 50%;
transform: translateY(-50%);