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>
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 months ago.
<main>
<div class="container">
<div class="slider">
<img src="img/frame-1.jpg" width="1300px" height="500px" alt="#">
</div>
</div>
</main>
CSS
.slider{
display: flex;
justify-content: center;
align-items: center;
}
i am not able to center this img using align-items: center property
try removing the
.slider{
display: flex;
justify-content: center;
align-items: center;
}
and adding the below code.
main {
min-height: 100vh;
display: grid;
place-content: center;
}
adjust the main tag height to your liking but it should be big enough to fill the gap i.e (100vh - (header + footer))
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;
}
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
My question is simple, I have a <div> with two <p> tags inside of it, I want one centered vertically in the <div> and the other to be at the bottom, is there a simple and clean way to achieve this?
Here is the code: https://jsfiddle.net/xpm7fsoh/
.App {
display: flex;
text-align: center;
}
.Container {
color: #fff;
background-color: red;
padding: 50px;
display: flex;
height: 50vh;
}
.One {
display: flex;
align-items: center;
}
.Two {
display: flex;
align-items: flex-end;
}
<div class="App">
<div class="Container">
<p class="One">Hello</p>
<p class="Two">World</p>
</div>
</div>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 4 years ago.
Pretty common question I guess, but couldn't find any solution to fix it.
Code is:
<div class="container">
<div class="first-item">A</div>
<div class="second-item">B</div>
</div>
Should look like this:
first-item will be at middle and second-item should be at last.
What I've tried:
.container {
display: flex;
justify-content: center;
}
.container .second-item {
align-self: flex-end;
}
How could I achieve it using flex or in any other way of css?
Almost: you just need to add a margin auto on the first element
.container {
display: flex;
justify-content: center;
}
.first-item {
margin: auto;
}
.second-item {
align-self: flex-end;
}
Codepen demo
You can try that,
.container {
display: flex;
justify-content: center;
}
.container .second-item {
right: 0;
position: absolute;
}
<div class="container">
<div class="first-item">A</div>
<div class="second-item">B</div>
</div>
This question already has answers here:
Prevent flex items from rendering side to side
(3 answers)
Closed 5 years ago.
I have the following code which vertically centers my content
html
<div class="titleHide flex">
<h4>...</h4>
<h1>...</h1>
</div>
css
.titleHide {
position: absolute;
top: 0; left: 0;
height: 100%; width: 100%;
background-color: rgba(209,30,93,0.8);
}
.flex {
display: flex;
flex: 1;
align-items: center;
}
.flex is used by other divs on my site. However in this case it puts the h1 and h4 titles aligned beside each other, I want them the stack on top of each other.
You may consider writing a separate CSS class for that, say:
.flex-stack {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.flex,
.flex-stack {
display: flex;
flex: 1;
align-items: center;
}
.flex-stack {
flex-direction: column;
}
.module-1,
.module-2 {
margin: 1em;
}
<h3>Flex Inline</h3>
<div class="flex">
<div class="module-1">
Module #1
</div>
<div class="module-2">
Module #2
</div>
</div>
<h3>Flex Stacked</h3>
<div class="flex-stack">
<div class="module-1">
Module #1
</div>
<div class="module-2">
Module #2
</div>
</div>
Hope it was helpful. Cheers!