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;
}
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 8 days ago.
I want to make all my content/elements in tag to be centered of the browser or viewport.
I did this initially:
body {
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
But my is not at the center vertically. You can refer here for the image.
However, after I added height: calc(100vh - 1px); to my code, then only it will be at the center of the browser/viewport perfectly.
Full code:
body {
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: calc(100vh - 1px);
}
You can referhere for the image and can see the content is in the center now.
My understanding is, with display:flex, justify-content: center, align-items: center, I would be able to make all the child elements to be centered. Obviously, my understanding is wrong.
Can anyone explain this?
Thank you in advance!
Height of <body> depends on its content, that's why your trick won't work until you make it the same height as the viewport (-1px to avoid scrollbar I guess). Give a background colour to <body> and you will see.
Is it possible to make flex-wrap wrap after the last row overflows without vertical scroll like it is possible horizontally?
My CSS currently looks like this:
.flex-container {
height: calc(100% - 0.125rem);
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
overflow: hidden;
align-items: center;
}
.item {
width: 6.25rem;
height: 6.25rem;
margin: 1px 0 0 1px;
font-size: 2.25rem;
line-height: 6.25rem;
background-color: rgb(225, 225, 225);
}
My output looks like this (flex wraps and empty space below)
What I am trying to achieve looks like this
If I understand your question right, I think the challenge you have is with the height property of the .flex-container class.
height: calc(100% - 0.125rem) will leave an offset(gap) since the height of .item 6.25rem > 0.125rem.
For the height of .flex-container try height: calc(100% - 6.25rem) instead, or tweak the height property until you get your desired output.
Note that the flex-wrap property only specifies if the flex items should stay on one line or can wrap onto multiple lines, which you already have specified. And with the overflow property set to hidden, you should not have any challenges with scrolls.
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
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;
Because examples rule: http://jsfiddle.net/rudiedirkx/wgue7/
How do I get the bars to the bottom instead of the top? Now they're sticking to the top of the container (#bars) but I want them sticking to the bottom.
As you can see, I don't know the height of the highest bar, so I don't know the height of the container.
These q+a don't help: Vertically align floating divs, Vertically align floating DIVs
Should be simple, right? If it helps: it only has to work in decent browsers.
PS. Number of bars is variable (not in the example) and their heights are. Only their widths are static. Positioning absolute won't help, because the container div doesn't have measurements.
This will do the trick:
#bars {
display: table-cell;
border: solid 1px black;
}
#bars > div {
display: inline-block;
vertical-align: bottom;
width: 5px;
background-color: #999;
margin-left: 2px;
}
#bars > div:first-child {
margin-left: 0;
}
It uses display: table-cell; on the parent div, which by default has vertical-align: baseline; applied. This changes the need for float: left; on the child divs and allows us to use display: inline-block;. This also removes the need for your CSS clear fix.
EDIT - Per #thirtydot's comments, adding vertical-align: bottom; to the child divs removes the gap at the bottom.
Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell; so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!
FLEXBOX! Flexbox is the most bestest.
Example: http://jsfiddle.net/rudiedirkx/7FGKN/
Flexbox makes this ridiculously simple (and not to forget correct):
#container {
display: flex; /* or inline-flex */
flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
align-items: flex-end; /* bottom */
}
#container > div {
/* margin etc here, but nothing layoutish */
}
That's it Two lines of CSS: display: flex and align-items: flex-end.