This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
I just can't center the div(Horizontal-Container)both vertically and horizontally and I can't figure out why it's not working...
I've try all the methods by w3school, but either it's not horizontally or vertically center, it can't be both achieved...
Below is my code:
body {
background-color: #62306D;
}
.Horizontal-Container {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
Your issue arises from .Horizontal-Container not being full height so it is technically vertically centered, just it hasn't moved. To fix this, you need to set the height of body and html to 100% which then allows the container to have the height you desire. It may seem off centre now, but that is down to padding and margin on the elements which you can easily remove.
html, body {
background-color: #62306D;
height: 100%;
margin: 0;
padding: 0;
}
.Horizontal-Container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
It's not working because your .Horizontal-Container does not have a specific height. If you set the height to auto it will consume as much space as its children need. Thus you have to add a height either to your container or simply to your body in order to center your elements over the whole page.
body {
background-color: #62306D;
}
.Horizontal-Container {
width: 100%;
height: 100vh; /* <-- set a specific height */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
}
.Yellow {
background-color: #F7EC7D;
width: 90px;
height: 180px;
}
<div class="Horizontal-Container">
<div class="Yellow"></div>
<div class="Yellow"></div>
<div class="Yellow"></div>
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 1 year ago.
I'm trying to center the container and I don't know why it doesnt work.
html,
body {
height: 100%
}
.container {
min-height: 20em;
width: fit-content;
background-color: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
Flexbox only centers its contents.
In other words, adding flexbox to the container will center everything inside it.
To fix it, add flexbox to the body instead:
html, body {
height:100vh;
margin:0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container{
min-height:20em;
width: fit-content;
background-color:#ffffff;
}
Try this!!!
*{
margin: 0;
padding: 0;
}
.parent{
width: 100vw;
height: 100vh;
background: grey;
display: grid;
place-content: center;
}
.child{
background: blue;
width: 10vw;
height: 10vh;
}
<div class="parent">
<div class="child"></div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I have a container div which has other divs and contents within it and I am trying to center the outer div.
For example:
body {
height: 100vh;
width: 100vw;
}
.test {
width: 20vw;
height: 20vh;
background-color: green;
}
.outer-test {
display: block;
margin: auto;
}
<div class="outer-test">
<p>Hello</p>
<div class="test"></div>
</div>
In the example above, how would I be able to center the div with class of "outer-test"? I have tried to make the display: block and use margin: auto but that doesn't seem to be working.
Option 1: You can use display: flex on the body
body{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center; // Centers in the direction of flex-direction (default is row)
align-items: center; // Centers in the direction normal to flex-direction
}
.test{
width: 20vw;
height: 20vh;
background-color: green;
}
<body>
<div class="outer-test">
<p>Hello</p>
<div class="test"></div>
</div>
</body>
Option 2: You can use a wrapper around your outer div.
body {
height: 100vh;
width: 100vw;
}
.test {
width: 20vw;
height: 20vh;
background-color: green;
}
.center {
display: flex;
justify-content: center;
}
<body>
<div class="center">
<div class="outer-test">
<p>Hello</p>
<div class="test"></div>
</div>
</div>
</body>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 years ago.
I have a div with a display: flex, and I would like to display the output in a row center. For some reason it is displaying left. I want the imgBoxBot to be centered inside the imgBot div. But text-align: center is only centering the text inside the imgBoxBot, how do I center the actual div?
#imgBot {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
display: flex;
flex-direction: row;
text-align: center;
}
#imgBoxBot {
height: 100px;
width: 100px;
}
<div id="imgBot">
<div id="imgBoxBot">
test
</div>
<div id="imgBoxBot">
test
</div>
</div>
Use justify-content: center. You can find more information here
#imgBot {
position: absolute;
height: 100px;
width: 100%;
bottom: 0;
display: flex;
flex-direction: row;
justify-content: center;
}
.imgBoxBot {
height: 100px;
width: 100px;
}
<div id="imgBot">
<div class="imgBoxBot">
test
</div>
<div class="imgBoxBot">
test
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
I'm trying to get one flex item to be centered vertically and horizontally.
I'd like for some text to be fixed to the bottom of the flex container.
margin-top:auto on the text just shoves the inner box to the top. Ideas?
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.container .box {
background: goldenrod;
height: 30px;
width: 30px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Here's the codepen.
Try the below instead:
.box {
background:goldenrod;
height: 30px;
width: 30px;
margin: auto;
}
Here is one way of doing it.
Add position: relative to your .container CSS rule, and then use absolute positioning on .box to position the span to the bottom of the parent container.
You can center the text by allowing .box to have 100% width and then using text-align: center.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
position: relative;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
Since flexbox alignment involves the distribution of free space in the container, margin-top: auto won't work in this case because there's no counterweight on the other side.
Therefore, one method for centering the box and bottom-aligning the text involves creating a duplicate of the text element and placing it on the opposite side of the box. This will create a counterweight.
With equal balance on both ends, flex alignment properties (including auto margins) can work.
In this case, even justify-content: space-between would work.
Of course, you'll need to apply visibility: hidden to the duplicate element.
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
margin: auto 0; /* or instead use justify-content: space-between on .container */
}
span:first-child {
visibility: hidden;
}
<div class="container">
<span>Text</span>
<div class="box"></div>
<span>Text</span>
</div>
OR, instead of a duplicate element, use a pseudo-element.
A less intrusive and more semantically proper method would use a pseudo-element as the duplicate. However, for this method to work, you would need to know the height of the actual element, because you would need to match it precisely.
Something like this will work to create equal balance:
.container::before {
content: "";
height: 15px; /* must match actual element's height */
}
.container {
background: lightblue;
width: 300px;
height: 300px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 10px;
}
.box {
background: goldenrod;
height: 30px;
width: 30px;
}
span {
height: 15px;
}
.container::before {
content: "";
height: 15px;
}
<div class="container">
<div class="box"></div>
<span>Text</span>
</div>
I have the following HTML
<div class="parent">
<div class="left-colum">Some paragraphs of text</div>
<div class="right-column"><img src="image.jpg"></div>
</div>
The right-column has the width of the image, but since it holds different size images its width is unknown. I want the left-column to take whatever is needed but with a max-width of 150px. I also want the image in the right-column centered vertically.
In the end it should look like the example below, but I have a hard time time getting this together. How would I do this?
edit: I have the following CSS, but the right-column isn't at 100% height so I can't start trying to vertically center the image yet:
.parent{
position: relative;
height: 100%;
}
.left-colum{
float: left;
max-width: 150px;
}
.right-column{
float: right;
height: 100%;
}
You could use nested flexbox see the comments inline.
body {
margin: 0;
}
.parent {
display: flex;
height: 100vh; /*viewport height*/
}
.left-column {
background: pink;
max-width: 150px;
}
.right-column {
background: gold;
flex: 1; /*expand*/
display: flex;
justify-content: center; /*center x*/
align-items: center; /*center y*/
}
<div class="parent">
<div class="left-column">Some paragraphs of text</div>
<div class="right-column">
<img src="//dummyimage.com/100">
</div>
</div>
Use flex display on columns and set display:flex; align-items:center; justify-content: center on right div and max-width: 150px; on left div. Also be aware of vendor prefixes for browsers in order to properly use flex property.
.parent {
display: flex;
align-items: center;
justify-content: space-between;
}
.left-column {
max-width: 150px;
display: flex;
}
.right-column {
display: flex;
justify-content: center;
align-items: center;
display:center;
}