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 ></div>
<div ></div>
<div ></div>
</div>
CodePudding user response:
It's the display: flex;
that's causing the issue. Here's a working model:
<div id="container">
<h1>TITLE!!!</h1>
<div >
<div ></div>
<div ></div>
<div ></div>
</div>
</div>
#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;
}
CodePudding user response:
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 >
<h1>TITLE!!!</h1>
<div id="container">
<div ></div>
<div ></div>
<div ></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.