I am experimenting with flex-box but I seem to be failing to create nested flexboxes. As in the code below, while the container children behaves normally, the paragraphs in the text div do not perform as expected.
I am trying to create a row of divs (div 1 2 3) aligned horizontally spaced evenly, while the contents in the middle div (the two paragraphs) should be spaced vertically evenly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div>Div 1</div>
<div class="text">
<p>abc</p>
<p>def</p>
</div>
<div>Div 3</div>
</div>
</body>
</html>
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
weight: 100%
}
As Paulie said you have to add a height to your text class. In addition to that make the default margin and padding of the body 0 so that you can see the evenly spaced div(s). Here is the code for the css
*{
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
.text {
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
Related
I'm trying to center a text in the middle of my screen. For some reason it doesn't work. Can someone please take a look at the following index.html and explain to me what I am doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
</body>
</html>
I was thinking that the flex-layout fills all available space. Since my flex-direction is "column", I was expecting the outer container to fill the entire height of my screen, but apparently that's not the case.
Update:
I have now placed my outer-container and the inner-container inside a parent-container to showcase the issue I have when setting the height of the outer-container to 100vh: As you can see, the issue is that a height of 100vh for my outer-container is now too much - the correct height would be 100vh minus the height of the header.
add justify-content: center; on both containers
Your container does not take all screen height and vertical alignment is missing. Here is codepen https://codepen.io/ignasb/pen/KKBQzjQ with vertical and horizontal alignment. I added height and alignment css properties
.outer-container {
height: 100vh;
justify-content: center;
display: flex;
flex-direction: column;
}
Also you might want additional styles if that scrollbar appears.
body {
margin: 0;
}
The quick and dirty solution is to make the containing parent, body, .outer-container or some .wrapper, fill the full viewport with height: 100% or 100vh, eventually subtract heights of other elements in the same container and use below CSS to center its content.
display: grid; place-items: center;
snippet
/* Make sure padding/border size are part of element size */
* { box-sizing: border-box }
body { margin: 0 } /* remove default space, causes overflow */
.parent-container {
display: flex;
flex-direction: column;
height: 100vh; /* would cause overflow with body margin */
}
/* Takes space from .parent-container */
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
flex: 1; /* Stretch to fill available space */
display: grid; place-items: center; /* Easy centering demo */
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 months ago.
I'm trying to position the green box in the center of the page but totally unsuccessfully.
I set the body as flex..this should allow me to align the inside container to the center but it doesn't work. Why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign Up</title>
<link rel="stylesheet" href="signup.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="https://kit.fontawesome.com/5ab317586b.js" crossorigin="anonymous"></script>
</head>
<body class="body">
<div class="container">
<div class="box-1">
<h2>Box1</h2>
<p>This is the box 1</p>
</div>
<div class="box-2">
<h2>Box2</h2>
<p>This is the box 2</p>
</div>
<div class="box-3">
<h2>Box3</h2>
<p>This is the box 3</p>
</div>
</div>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>
CSS
.body{
background-color: black;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
}
.container div {
border: solid red;
padding: 0;
}
.container{
background-color: green;
display: flex;
justify-content: space-around;
}
I want the green box in the middle, what I'm doing wrong?
thanks
you need to assign height in vh and add justify-content: center; to your body css. the following body css will align it to center
.body{
background-color: black;
display: flex;
width: 100%;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
As Anis has mentioned the body need to be assigned a height so there will be space for the centering to work.
This version uses min-height so the page will be able to scale as more content being added later.
body{
background-color: black;
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
I`ve been struggling with some css code, specifycally with flex. First i had to figure it out how to stick footer at bottom but now i cant center my divs. Here is the html:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as
you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</html>
</div>
and the css:
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.optional-content-wrap {
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.content-wrap {
flex: 1 1;
}
You want the children of the flex to be centered. So I set .content-wrap display to flex, and aligned items within. also text-align center.
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content-wrap {
flex: 1 1;
}
.content-wrap {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-container">
<div class="content-wrap">
<div class="optional-content-wrap">
<h1>Write, edit and run HTML, CSS and JavaScript code online.</h1>
<p>
Our HTML editor updates the webview automatically in real-time as you write code.
</p>
</div>
</div>
<div>Footer</div>
</div>
</body>
</html>
Maybe you can help me, I want to center vertically as well as horizonally the buttons side by side.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Page</title>
<link rel="icon" type="image/ico" href="Logo.ico">
</head>
<style>
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>
<body>
<div class="wrapper">
<input type="image" src="btn-system-konfiguration-orange.png">
<input style="padding: 1%" type="image" src="btn-digital-twin-orange.png">
<input type="image" src="btn-sensor-konfiguration-orange.png">
</div>
</body>
</html>
Do you have any ideas? The solution is probably very simple.
I believe if you use justify-content: space-around; can help with making them line up horizontally.
.wrapper {
display: flex;
align-items: center;
justify-content: space-around;
}
When you try to align it vertically you would need to use flex-direction: column; I am assuming youre doing this when the screen size is phone size so I would add it to a media query with max 400 or something along those lins
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
add
html,
body {
height: 100%;
}
the html and body need to have height defined in this case.
Working pen: https://codepen.io/vas131/pen/yLgydxN
The R, P, and S end up being stacked on top of each other in a column rather than being side by side.
I've been going through freeCodeCamp and theOdinProject and this issue has come up a few times for me, I usually ended up just assigning each div an ID and using CSS to target it with a 'display: flex.'
I figured I should finally find out why this isn't working so if someone could please explain it to me, I'd greatly appreciate it!
Here's my HTML:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.keys {
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
justify-content: center;
flex-direction: row;
}
<html>
<head>
<link rel='stylesheet.css' type=text/css href='stylesheet.css'>
</head>
<body>
<div class='keys'>
<div data-key='82' class='key'>
<kbd>R</kbd>
</div>
<div data-key='80' class='key'>
<kbd>P</kbd>
</div>
<div data-key='83' class='key'>
<kbd>S</kbd>
</div>
</div>
</body>
</html>
You don't need the "flex: 1".
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
^ should do it.
If you want to space the items, try justify-content: space-evenly