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>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 2 years ago.
I have the follwing:
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.el1 {
margin-right: 10vw;
}
.el2 {}
.el3 {}
<div class="container">
<Button class="el1">Info</Button>
<input class="el2"></input>
<Button class="el3">Search</Button>
</div>
The problem is, that this created two centered elements and the first element having an unknown position since it depends on the screen size.
Instead, I want it to be next to the beginning of the screen on the left side, left aligned with the other two elements sitting in the center of the screen.
You should wrap input and last button in a div container and set the position to absolute.
.container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.child-wrapper {
position: absolute;
margin: auto;
}
.el1 {
margin-right: auto;
}
.el2 {}
.el3 {}
<div class="container">
<Button class="el1">Info</Button>
<div class="child-wrapper">
<input class="el2"></input>
<Button class="el3">Search</Button>
</div>
</div>
You can make .el1 position: absolute, and set the align-items of the container to center. The HTML structure remains as is.
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.el1 {
position: absolute;
left: 0;
}
<div class="container">
<Button class="el1">Info</Button>
<input class="el2" />
<Button class="el3">Search</Button>
</div>
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>
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:
margin-top only when the flex item is wrapped
(2 answers)
Closed 4 years ago.
i have a container with two child. i set flex-wrap property and value wrap. In Small device when they break in unknown width then how can i set margin/padding between two item?
https://jsfiddle.net/irojabkhan/w1x5phya/4/
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background: blue;
font-size: 46px;
}
<div class="container">
<div class="item">Hello World</div>
<div class="item">Keep Learning</div>
</div>
Just set the margin-bottom to the amount of space you require:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
background: blue;
font-size: 46px;
margin-bottom: 20px; /* Set this to whatever you want it to be*/
}
.contai<div class="container">
<div class="item">Hello World</div>
<div class="item">Keep Learning</div>
</div>
Simply added margin-bottom to parent-block;
`.parent{
display: flex;
flex-wrap: wrap;
margin-top: -30px;
}
.child-1,.child-2{
margin-top: 30px
}
`
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!