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.
Related
So I have 2 <div> tags in my body, and I want them both to be in one line. However, it automatically makes a line break. Is there a way to fix this?
.firstDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
}
.secondDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 150px;
border-radius: 30%;
background-color: grey;
margin-left: 10px;
}
.mainDiv {
display:flex;
flex-direction: row;
}
<div class="mainDiv">
<div class="firstDiv">
First Div
</div>
<div class="secondDiv">
Second Div
</div>
</div>
Use display inline block
.content {
width: 100px;
height: 100px;
display: inline-block;
background-color: black;
}
<div class="content">Content</div>
<div class="content">Content</div>
[![Red: Centered on canvas: Black: Centered between center and top of canvas][1]][1]
Using flex, it is easy to position elements in the center of a div. But how can this be done relative to already centered elements, using flex?
Shown below in the code is the best I've come up so far. I am able to center the red square in the middle but cannot get the blue one above it to be vertically center-aligned between the red square and the top border.
.flex {
border-style: solid;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
height: 100vh
}
.square {
height: 10px;
width: 10px;
}
#square1 {
background-color: blue;
}
#square2 {
background-color: red;
}
.flexdivider {
display: flex;
flex-direction: column
justify-content: center;
align-items: center;
flex: 1;
}
p {
color: white;
}
<body>
<div class="flex">
<div class="flexdivider">
<div class="square" id="square1"></div>
</div>
<div class="flexdivider">
<div class="square" id="square2"></div>
</div>
<div class="flexdivider">
</div>
</div>
</div>
</body>
[1]: https://i.stack.imgur.com/4lUop.png
I have created 2 separated approach.
h2{
color: #333;
}
.box,.fakebox{
width: 30px;
height: 30px;
background-color: red;
}
/* Example #1 */
.container-box-1{
background-color: #eee;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.fakebox{
opacity: 0;
}
.box2{
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%,-50%)
}
<h2>Example #1 (Using Display Flex and position absolute)</h2>
<div class="container-box-1">
<div class="box"></div>
<div class="box box2"></div>
</div>
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>
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>
I'm trying to make a board-game adoption for web.
I want to use Bootstrap to make the elements responsive.
The main element of the game is a rectangle (the game board). This shall appear centered in all display-sizes and with a bit of margin to all sides.
Which attributes and CSS-rules do I have to apply?
Shall I use a normal container or container-fluid?
Would it be enough to make one column within the container / row and give it a class of "col-xs-12"?
As far as I know this would be applied to all devices beginning from the smallest to the largest upwards.
What I have tried so far:
html, body {
height: 100%;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
justify-content: center;
background-color: #ababab;
}
.row {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.board {
margin: 10px;
height: 400px;
width: calc(100% - 40px);
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
text-align: center;
line-height: 400px;
}
<div class="container">
<div class="row">
<div class="col-xs-12 board">The game-board</div>
</div>
</div>
Here you can see an example : you dont need col-xs-12 . You have only to set contaier-fluid in the parent and some padding in div wrapper with box-sizing:border-box . Row is for reset the standard padding of container and col classes with negative margin. It's your decision if you want to .
html,body{height:100%;margin:0;padding:0;}
.container-fluid,.row{height:100%;background-color:grey}
.board-container{padding:40px;box-sizing:border-box}
.board{background-color:teal;height:100%;padding:40px;}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row board-container">
<div class="board">Board Game</div>
</div>
</div>
html, body {
height: 100%;
}
.container {
margin: 10px auto;
height: 100%;
display: flex;
justify-content: center;
background-color: #ababab;
}
.row {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.board {
margin: 10px;
height: calc(100% - 40px);;
width: calc(100% - 40px);
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-xs-12 board">The game-board</div>
</div>
</div>
html,body{
height:100%;
background:#FF3366;
}
.container {
width:100%;
height:100%;
}
.row{
height:100%;
margin:30px 30px 30px 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: teal;
border: 1px solid black;
font-size: 2.5em;
font-weight: bold;
color: white;
}
<div class="container">
<div class="row">
<div class="col-xs-12">The game-board</div>
</div>
</div>
Try this one.