This question already has answers here:
How does the vertical-align property work?
(2 answers)
Closed 2 years ago.
I can't figure this out, it's suposed to put the boxes in the middle of it's container, but I can't make them move.
The idea is to center the inside the wrapper and to place them horizontally in the middle without having to fuzz around with margins or paddings and using veritcal-align.
#wrapper {
width: 1000px;
height: 1000px;
}
#container {
width: 900px;
height: 900px;
text-align: center;
display: inline-block;
background-color: lightblue;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
}
<div id="wrapper">
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</div>
I think you are looking for flexbox.
I have adapted your jsfiddle to fit
https://jsfiddle.net/ke4w58ra/
The folowing code is what I have changed to your #content element.
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
Essentially, setting the elements to display in the center horisontally (align-items) and vertically (justify-content). With a gap of 5px to space the boxes out.
For more information, look here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Below is the integrated form of the JSFiddle
#container{
width: 100vw;
height: 100vh;
text-align: center;
display: inline-block;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
.box{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: lightgreen;
border: 1px solid grey;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
}
body {
margin: 0px;
}
<body>
<div id="container">
<div class="box">BOXES</div>
<div class="box">BOXES</div>
<div class="box">BOXES</div>
</div>
</body>
Related
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 10 months ago.
I like to have a div that keeps all it's children in the center (vertical and horizontal). I can easily achieve this by using flexbox. But when width of my children get bigger than the parent, a part of children is not visible.
How can I fix this?
Codepen
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
You just have to change the justify-content to be flex-start
See below.
And if you want the H1 to be centered, just use text-align: center
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: scroll;
}
.children {
min-width: 1200px;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
Change the .container{
min-width: 100%}
* {
margin: 0;
padding: 0;
}
.container {
height: 500px;
width: 500px;
background: red;
display: flex;
justify-content: center;
align-items: center;
overflow: scroll;
}
.children {
min-width: 100%;
height: 50px;
background: blue;
}
<div class='container'>
<div class="children">
<h1>Welcome to my city, california</h1>
</div>
</div>
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>
How do you have a CSS grid that is responsive for its child container when centered horizontally and vertically, I want to do this with CSS grid only. The code below doesn't work at all but it's the basics of what I want, can someone please get my code to work and make the box responsive, please!
html,
body {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
height: 500px;
width: 100%;
max-width: 800px;
background: red;
border: 3px solid blue;
}
<div class="box"></div>
remove html
body {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
height: 500px;
width: 100%;
max-width: 800px;
background: red;
border: 3px solid blue;
box-sizing:border-box;
}
<div class="box"></div>
just remove HTML from your CSS target element cause HTML is the root element of your page
body {
display: grid;
justify-items: center;
align-items: center;
height: 100vh;
margin: 0;
}
.box {
height: 500px;
width: 100%;
max-width: 800px;
background: red;
border: 3px solid blue;
}
<div class="box"></div>
I'm working on project which includes a login/register page. It's basically a white div in body which should be centered verticaly and horizontally, but sometimes can be bigger than body.
When div is small everything is okay, but when its bigger than body then I just want it to have small padding on top and bottom.
How can I achieve that ? I have been searching for answer whole day and finally I'm here. Help me people :C
#wrap {
height: 300px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
You can use min-height instead of height and a small top and bottom padding on the wrapper as shown below. When the inner element is higher than the wrapper, it will extend the wrapper and additionally keep the padding .
#wrap {
min-height: 300px;
padding: 10px 0;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
#content {
background: #000;
width: 100px;
height: 400px;
}
<div id="wrap">
<div id="content">
</div>
</div>
Use min-height instead of height, and add padding to top and bottom. Use box-sizing: border-box to prevent the padding from changing the height:
.wrap {
box-sizing: border-box;
min-height: 300px;
width: 150px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background: #DDD;
}
.content {
background: #000;
width: 100px;
height: 400px;
}
/** for the demo **/
.content--small {
height: 100px;
}
body {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
<div class="wrap">
<div class="content">
</div>
</div>
<!-- for the demo -->
<div class="wrap">
<div class="content content--small">
</div>
</div>