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>
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
How to align text below an image in CSS?
(7 answers)
Closed last year.
struggling to centre my icon above the text, the height of the icon is fine but it should sit like so:
tried using flex but couldn't find the correct solution.
.container {
display: block;
width: 400px;
height: 100px;
border: 2px solid black;
}
.icon {
width: 30px;
height: 30px;
background-color: red;
}
.text {
text-align: center;
}
<div class="container">
<div class="icon"></div>
<p class="text">We couldn't find any matches to your search. <br></br>Please try again.</p>
</div>
You can use CSS flexbox: but remember that the default direction is row. If you switch it to flex-direction: column, then you will achieve what you want:
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 400px;
height: 100px;
border: 2px solid black;
}
.icon {
width: 30px;
height: 30px;
background-color: red;
}
.text {
text-align: center;
}
<div class="container">
<div class="icon"></div>
<p class="text">We couldn't find any matches to your search. <br />Please try again.</p>
</div>
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>
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)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
I need to put button under button, with display flex.
When I remove display: flex the button goes up the page, but when I use display: flex the buttons are centered but they are side by side.
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
button {
height: 20px;
width: 100px;
}
<div id="wrapper">
<button type="button">hello</button>
<button type="button">hello</button>
</div>
You can use flex-direction: column. This will stack the flex items vertically (from top to bottom)
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
button {
height: 20px;
width: 100px;
}
<div id="wrapper">
<button type="button">hello</button>
<button type="button">hello</button>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 5 years ago.
How to align a div vertically to middle and another div vertically to bottom inside a flex column?
Expected result:
.container {
border: 1px solid black;
height: 200px;
width: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.first-item {
margin-top: auto;
margin-bottom: auto;
}
<div class="container">
<div class="first-item">First</div>
<div class="second-item">Second</div>
</div>
That should do it. Then the second item should be pushed to the bottom while the first item stays in the middle. A pure flexbox solution not using absolute positioning.
You have to use the line-height property with the same height value
.parent{
display: table;
position: relative;
border: 1px solid;
height: 150px;
line-height: 150px;
}
.parent div{
position: absolute;
bottom: 0;
line-height: 20px;
}
<div class="parent">
test
<div>test</div>
</div>
Take a look at this.
.parent{
display: flex;
height: 150px;
width: 50px;
border: 1px solid black;
align-items: center;
justify-content: center;
}
.two{
align-self: flex-end;
position: absolute;
}
<div class="parent">
<div>test</div>
<div class="two">test</div>
</div>