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
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>
I want to write these two addresses in my heading, I tried this code but "/" doesn't place in the same line. could anyone help me fix it?
<header>
<nav class="header">
<h1>CRIS</h1>
<p class="light_grey">Art direction design</p>
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
<p>Menu</p>
</nav>
</header>
and this is css code :
.header {
justify-content: space-around;
display: flex;
}
.address {
display: flex;
justify-content: space-around;
}
You need to add align-items: center to it:
.address {
display: flex;
justify-content: space-around;
align-items: center;
}
<div class="address">
<address>Call me (+706)098-0751</address>
<p>/</p>
<address>cris#gmail.com</address>
</div>
Because by default, <p> tag has some vertical margins applied it, you could also set .address p { margin: 0; } to get rid of it.
There are several solutions to your problem. For example, here are two of the many:
This is #Hao Wu answer, using align-items: center. <--- Better use this solution.
This is to use margin rules, like this:
.address address,
.address p {
margin-top: auto;
margin-bottom: auto;
}
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 2 years ago.
Hi so I just need some help on flexbox, ive looked at other people and even copied there code to test but for some reason it isnt working. I'm trying to get a div with content aligned in the center top of a website. Here is my current code,
index.html
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div
style.css
html {
display: flex;
}
.header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.headerContent {
background-color: #2C374C;
width: 100%;
justify-content: center;
}
when you use flex-direction: column;, to center horizontally use align-items: center; instead of justify-content: center;
You also have set a height property.
Example:
.header{
display: flex;
height: 300px;
justify-content: center;
align-items: center;
background: red
}
<header class="header">
<div>centered</div>
</header>
it seems you are doing the right thing but on the wrong element. Your are treating the .header id as the parent container when it is the child.
In this case the container hierarchy is the following html -> header -> .headerContent
So to center header you need to act on its parent. Imagine it as a parent giving order to its child (literally).
html {
display: flex;
justify-content: center;
}
by doing this the parent component is justifying its content (children)
I would also recommend instead of using html to create another div container to be the parent of your header div like so
.headerContainer {
display: flex;
justify-content: center;
background-color: red
}
.header {
display: flex;
}
.headerContent {
background-color: #2C374C;
width: 100%;
}
<div class="headerContainer">
<div class="header">
<div class="headerContent">
<h1>TEST<h1>
</div>
</div>
</div>
I think just like this
.header {
width: 100%;
}
.headerContent {
background-color: #2c374c;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<html>
<link rel="stylesheet" href="style.css" />
<div class="header">
<div class="headerContent">
<h1>Test</h1>
</div>
</div>
</html>
I've been trying to get these objects to center and when I used an <a href> tag, I could see that I was able to click way away from the picture and still the link would activate. I am assuming this means that the child containers are taking up 50% of the width each, despite only a tiny portion of the container being full. Why is there blank space that is preventing me from aligning my objects?
RELEVANT HTML:
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>Previous Project </p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p> Next Project</p>
</div>
</div>
RELEVANT CSS:
.container {
display: flex;
justify-content: center;
}
.containerimg {
width: 30%;
height: auto;
}
.next {
display: flex;
flex-direction: column;
}
.previous{
display: flex;
flex-direction: column;
}
CODEPEN: https://codepen.io/daniel-albano/pen/zYGKZEw?editors=1100
Your question is a little vague, but I'm assuming that you want to center the .previous and .next divs.
Since both of these are using display: flex already, you simply need to add align-items: center to the .previous and .next classes to make them center horizontally. If you also want the content (the image and text) to center vertically, you'll need to add justify-content: center. Here's the result:
.next {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.previous {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
If you're trying to make the images in those divs take up more space, you'll need to increase the width rule below. Since you commented that you need 100%, you'll need to change it to this:
.containerimg {
width: 100%;
height: auto;
}
I found the issue, I needed my images to contain 100% of the space and I needed to assign a width element to the child containers.
.container {
display: flex;
justify-content: center;
width:100vw;
}
.previous, .next{
width:30%;
display:flex;
flex-direction:column;
align-items:center;
}
img{
width:100%;
}
<div class="container">
<div class="previous">
<img class="containerimg" src="https://i.imgur.com/YgZ2GOl.png">
<p>caption 1</p>
</div>
<div class="next">
<img class="containerimg" src="https://i.imgur.com/s11MTLc.png">
<p>caption 2</p>
</div>
</div>
You should be able to solve this issue by adding "align-items: center" to your .next and .previous classes. The reason for this is that when you switch the flex-direction to column that also switches how align-items and justify-content work, essentially reversing them.
.next {
display: flex;
flex-direction: column;
align-items: center;
}
.previous{
display: flex;
flex-direction: column;
align-items: center;
}
If we have this structure of HTML
<div id="main">
<div id="sub-1"><div>
<div id="sub-3"><div>
<div id="sub-3"><div>
</div>
And the SASS styles for that structure as:
#main
display: flex
flex-direction: column
justify-content: center
align-items: center
align-content: center
width: 1200px
#sub-1, #sub-2, #sub-3
width: 100px
height: 100px
With that structure we will have a column of 3 squares perfectly center-aligned. But what if we want to move #sub-1 to the left and #sub-3 to the right? Is there a way to do that?
Thank you very much!
You can use the property align-self like this:
#main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
#sub-1, #sub-2, #sub-3 {
background:red;
width: 50px;
height: 50px
}
#sub-1 {
align-self:flex-start;
}
#sub-3 {
align-self:flex-end;
}
<div id="main">
<div id="sub-1"></div>
<div id="sub-2"></div>
<div id="sub-3"></div>
</div>