I have a parent div that must stay at 100% with 3 child divs inside. I need to center the 3 child divs, but don't know how.
.parent {
width: 100%;
border: 1px solid blue;
}
.child {
float: left;
border: 1px solid red;
margin: 2px;
}
<div class="parent">
<div class="child">child1</div>
<div class="child">child2 - center us child divs! :)</div>
<div class="child">child3</div>
<div style="clear: both"></div>
</div>
Here is a JSFIddle:
http://jsfiddle.net/qdHH3/2/
Try using display: inline-block and text-align: center
.parent {
width: 100%;
border: 1px solid blue;
text-align: center;
}
.child {
display: inline-block;
border: 1px solid red;
margin: 2px;
}
jsFiddle: http://jsfiddle.net/qdHH3/3/
Flex solution: set justify-content: center; to the parent element:
.parent {
display: flex;
justify-content: center;
/* align-items: center; /* To align vertically, if needed */
}
.parent, .child { border: 1px solid #000; }
<div class="parent">
<div class="child">child1</div>
<div class="child">child2 - center us child divs! :)</div>
<div class="child">child3</div>
</div>
.child {
$box-size: 100%;
width: $box-size;
height: $box-size;
display: flex;
justify-content: center;
align-items: center;
}
Related
I want to move the title to green area. If I carry to the container it puts blue area. If I decrease container height title getting closer to the squares. But I want the boxes in the center and the title little above of them. How can I do it?
#container {
width: 1200;
height: 600px;
margin: auto;
border: 1px solid grey;
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 250px;
width: 250px;
margin-left: 25px;
margin-right: 25px;
background-color: red;
}
h1 {
text-align: center;
}
<h1>TITLE!!!</h1>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
my page
It's the display: flex; that's causing the issue. Here's a working model:
#container {
width: 1200;
height: 600px;
margin: auto;
border: 1px solid grey;
}
.box-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.box {
height: 250px;
width: 250px;
margin-left: 25px;
margin-right: 25px;
background-color: red;
}
h1 {
text-align: center;
}
<div id="container">
<h1>TITLE!!!</h1>
<div class="box-wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I added a extra wrapper to wrap all the elements and added a display flex to it. Also, You can make use of a gap css property in wrapper class to add extra space between them.
.wrapper {
display: flex;
flex-direction: column;
border: 1px solid grey;
width: 1200px;
height: 600px;
}
#container {
margin: auto;
//border: 1px solid grey;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.box {
height: 250px;
width: 250px;
margin-left: 25px;
margin-right: 25px;
background-color: red;
}
h1 {
text-align: center;
}
<div class="wrapper">
<h1>TITLE!!!</h1>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Also, the other way to solve this would be to use absolute positioning and adding a top padding to allow space for the div header if extra div is really not required.
I am using this to center things in CSS:
.testclass {
display: flex;
justify-content: center;
}
but when i want to scale elements using width and height, it doesn't work and my elements are not centered.
Like this:
.testclass {
display: flex;
justify-content: center;
width: 200px;
height: 200px;
}
What's the problem?
This looks like the expected behavior.
Remember that in this case justify-content: center; centers what is inside the container - not the container itself.
EDIT:
I added margin: 0 auto; to center the container.
#container1 {
display: flex;
justify-content: center;
border: 1px solid red;
}
#container1 > div {
border: 1px solid blue;
background: yellow;
}
#container2 {
display: flex;
justify-content: center;
border: 1px solid red;
width: 200px;
height: 200px;
margin: 0 auto;
}
#container2 > div {
border: 1px solid blue;
background: yellow;
}
<div id="container1">
<div>test 1</div>
</div>
<div id="container2">
<div>test 2</div>
</div>
display: flex; and justify-content: center;
works for parent elements. That is, child elements of that particular parent will be centered, not the parent.
To center .testclassHTML
<div class="parent">
<div class="testclass"></div>
</div>
CSS
.parent {
background-color: red;
display: flex;
justify-content: center;
}
.testclass {
background-color: green;
width: 200px;
height: 200px;
}
If you want full center (horizontal vertical) you can use this code:
.container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="testclass">Content</div>
</div>
.outer {
border: 2px solid red;
display: flex;
}
.inner {
border: 2px solid cyan;
display: flex;
flex-flow: column wrap;
align-self: center;
}
.innest {
border: 2px solid orange;
flex-grow: 1;
}
<div class="outer">
<div class="inner">
<div class="innest">a</div>
<div class="innest">b</div>
<div class="innest">c</div>
</div>
<div class="inner">
<div class="innest">d</div>
</div>
</div>
I've been trying to both stretch and center the 'd' element of the above code example for a while now, but haven't been able to come up with a solution. I have been able to either stretch it vertically, or center it vertically, but not both at the same time. How can I do that?
EDIT: I would like the element with the cyan border to extend the height of its parent (red), while its inner element (orange border) also extends the height of its parent (cyan). All while the 'd' content is being vertically centered.
I guess this is what you're looking for
.outer {
border: 2px solid red;
display: flex;
}
.inner {
border: 2px solid cyan;
display: flex;
flex-flow: column wrap;
align-self: center;
}
.second_inner {
display: flex;
flex-basis: auto;
}
.second_inner .innest {
display: flex;
align-items: center;
}
.innest {
border: 2px solid orange;
}
<div class="outer">
<div class="inner">
<div class="innest">a</div>
<div class="innest">b</div>
<div class="innest">c</div>
</div>
<div class="second_inner">
<div class="innest">d</div>
</div>
</div>
If you have multiple containers with 1px border, all containers next to each other generate a 2px border. So in order to get rid of that you always set e.g. border-right: none; and then add border-right: 1px; to the last child to make all containers have 1px border in all sides.
But if you use flexbox flex-basis rule to break containers into next line, it breaks whole border-right idea, the last container in the line before the break always stays left out with no border.
e.g. in this example I have 5 containers, but I want 4 per line and when it breaks into new line, you can see the border-right issue:
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child {
border-right: 1px solid #000;
}
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>
https://jsfiddle.net/45kngj9p/
Since you know how many flex items there are in each row, you can use the :nth-child() selector to apply borders to items missed by the main rule.
.wrapper {
display: flex;
flex-wrap: wrap;
width: 400px;
}
.container {
flex-basis: 20%;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
margin-bottom: 1px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:nth-child(4n + 1) { /* add border to first child in each row */
border-left: 1px solid red;
}
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
</div>
<hr>
<div class="wrapper">
<div class="container">1</div>
<div class="container">2</div>
<div class="container">3</div>
<div class="container">4</div>
<div class="container">5</div>
<div class="container">6</div>
<div class="container">7</div>
<div class="container">8</div>
<div class="container">9</div>
<div class="container">10</div>
</div>
Remove Border:none; and add margin-left:-1px;
.container {
flex-basis: 20%;
border: 1px solid #000;
margin-left:-1px;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
That's it!
You can try these solutions:
1
Here you don't need the .container:last-child styles.
.container {
flex-basis: 20%;
border: 1px solid #000;
margin-bottom: 1px;
margin-right: -1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
2
This one works for boxes number 4, 8, 12, etc.
.container {
flex-basis: 20%;
border: 1px solid #000;
border-right: none;
margin-bottom: 1px;
min-height: 100px;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.container:last-child,
.container:nth-child(4n) {
border-right: 1px solid #000;
}
I want to center two divs with display: inline-flex; inside a block container, but somehow align-items: center; and justify-content: center; doesn't work. Only text-align: center; works, but it shouldn't be like that (because I've read that with display: inline-flex; it should be align-items and justify-content) I guess? If my solution is correct, then can you tell me what's the difference?
Also, I want to get rid of that little gap between these two centered divs, but I've tried some solutions from the internet and none of them works. Why?
I'd be glad if you guys could help me out with both of my questions.
Here's the code example:
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
text-align: center;
}
.child, .child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>
It will work if you use display: flex on container element. align-items and justify-content position flex items inside flex-container so you need to set display: flex on parent element.
.parent {
border: 1px solid blue;
background-color: yellow;
padding: 10px;
}
.container {
border: 1px dotted green;
padding: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.child,
.child2 {
display: inline-flex;
border: 1px solid red;
background-color: honeydew;
padding: 50px;
}
<div class="parent">
<div class="container">
<div class="child">
<h1> Test1.</h1>
</div>
<div class="child2">
<h1> Test2.</h1>
</div>
</div>
</div>