This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
.colum {
display: flex;
align-content: center;
}
.item {
width: 300px;
height: 300px;
background-color: white;
}
<div id="flexn">
<div class="colum cl1">
<div class="item a1">
</div>
<div class="item a2">
</div>
<div class="item a3">
</div>
</div>
<div class="colum cl2">
<div class="item b1">
</div>
<div class="item b2">
</div>
<div class="item b3">
</div>
</div>
</div>
I want the content from from both cl1 and cl2 to have different flexes that put the items in the middle, i tried doing this this way but it didn't work, why?
in case to put them in the middle in x-direction you have to use justify-content: center; and if u want to center them in y-direction u also need align-items: center; but this would only work if u have a height on your colum div.
.colum {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
width: 300px;
height: 300px;
background-color: white;
}
this is how it has to look like if u want to put them in the middle of the page.
And if u want to see the results u have to change the background color to any other color so u can see it . And maybe if u put some margin so u can put the items away from each other which makes it more clear. Like this one:
.colum {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
width: 300px;
height: 300px;
background-color: rgb(194, 55, 55);
margin: 20px;
}
Should be align items not content.
.colum {
display: flex;
align-items: center;
}
Try with this:
.colum {
display: flex;
justify-content: center;
}
.item {
width: 300px;
height: 300px;
background-color: white;
box-shadow: 0 0 4px #ccc;
text-align: center;
}
<div id="flexn">
<div class="colum cl1">
<div class="item a1">rr
</div>
<div class="item a2">rr
</div>
<div class="item a3">rr
</div>
</div>
<div class="colum cl2">
<div class="item b1">rr
</div>
<div class="item b2">rr
</div>
<div class="item b3">rr
</div>
</div>
</div>
Related
I have an issue where whenever I try to line up my images. It seems to not line up.
I do not know if this is an image issue but I could use some help.
I am new to this so if this is a easy fix from my side I apologize.
.portfolio-item-wrapper2 {
display: flex;
grid-template-columns: 1fr 1fr 1fr;
}
.portfolio-item-wrapper2 {
position: relative;
}
.portfolio-img-background2 {
height: 350px;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.img-text-wrapper2 {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding-left: 100px;
padding-right: 100px;
}
<div class="content=wrapper2">
<div class="portfolio-items-wrapper2">
<div class="portfolio-item-wrapper2">
<div class="portfolio-img-background2">
<div class="img-text-wrapper2">
<div class="logo-wrapper2">
<img src="\\kcfs04\StudentHome\20023600\Downloads\C.png" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content=wrapper3">
<div class="portfolio-items-wrapper3">
<div class="portfolio-item-wrapper3">
<div class="portfolio-img-background3">
<div class="img-text-wrapper3">
<div class="logo-wrapper3">
<img src="\\kcfs04\StudentHome\20023600\Downloads\G.png" />
</div>
</div>
</div>
</div>
</div>
</div>
This is the issue:
I need them both to be side by side because I will be adding more below but in the same position.
first, dont use css grid and flexbox with same time and you can use position relative property
This question already has answers here:
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 2 years ago.
so I am trying to use a flexbox to space evenly objects inside of it. The problem is that the flexbox adds space to the bottom of element but not at the top.
Here is the code of the section, the divs inside of it are the elements that I would like to space evenly inside it.
#Items {
width: 100%;
height: 800px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
#Items a {
text-decoration: none;
}
/* Classes */
.Box {
width: 320px;
height: 100px;
background-color: #f2f2f2;
}
.Box h3 {
font-family: 'Roboto', serif;
font-size: 22px;
color: #111;
}
<section id="Items">
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
</section>
The divs are being indeed spaced evenly inside the section with the flexbox EXCEPT that there is no space between the top of the first div in the flexbox and the top of the flexbox, but there is space between the bottom of the last div box and the bottom of the flexbox. Is there a clean way to fix this? I don't want to add padding or margin to my fist div box because I'd like to turn the div box into an anchor(or link) later on so users can click it and navigate to other parts of the website.
Thanks!
To vertical align the items, so there is an even margin above and below, use
align-items: center;
#Items {
width: 100%;
height: 800px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
border: 1px solid black;
align-items: center;
}
#Items a {
text-decoration: none;
}
/* Classes */
.Box {
width: 320px;
height: 100px;
background-color: #f2f2f2;
}
.Box h3 {
font-family: 'Roboto', serif;
font-size: 22px;
color: #111;
}
<section id="Items">
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
</section>
Your flex container is in row direction.
That means that justify-content: space-around will pad the horizontal edges.
If you want the padding on the vertical edges, add align-content: space-around.
#Items {
height: 800px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: space-around; /* new */
}
#Items a {
text-decoration: none;
}
/* Classes */
.Box {
width: 320px;
height: 100px;
background-color: #f2f2f2;
}
.Box h3 {
font-family: 'Roboto', serif;
font-size: 22px;
color: #111;
}
<section id="Items">
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
<div class="Box">
<h3>Case</h3>
</div>
</section>
I think you need of center ("h3") vertically that's inside the divs inside the section!
if I got that right then you need to add the following to ".Box" , that will align them vertically display: flex; align-items: center;, if you also need to align them horizontally then add "justify-content: center;"
.Box {
width: 320px;
height: 100px;
background-color: #f2f2f2;
display: flex;
align-items: center;
}
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I have seen this, question has been asked a lot but I have not really gotten an answer that works. I am trying to create 3 centred divs with multiple rows using (flex box) not grid please. Is it possible and what simple way. it should be center aligned.
I am trying to achieve this.
see as its centrally aligned. but mine is kinda alined to the left and if I use Justify content:center for the wrapper the two boxes go in the middle, like this.
this is my code
<div class="wrapper">
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div id="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
.wrapper {
background: #ff0000;
text-align: center;
width: 90%;
height: auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 5% 0;
justify-content: center;
}
#squares {
background: #00ff00;
width: 30%;
height: 100px;
margin: 10px;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
here's the link to my jfiddle for a clearer picture.
https://jsfiddle.net/9ros2v4j/6/
Thanks to anyone that can explain.
.wrapper {
background: green;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.wrapper-inner {
padding: 5px;
display: flex;
flex-wrap: wrap;
}
.square {
flex: 0 1 33.33%;
}
.square img {
width: 100%;
display: block;
}
.square-inner {
padding: 5px;
}
<div class="wrapper">
<div class="wrapper-inner">
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
<div class="square">
<div class="square-inner">
<img src="http://placekitten.com/200/200" />
</div>
</div>
</div>
</div>
One requirement is for justify-content: flex-start which would place your last row as per your need.
The second requirement you're asking for is that they should be centered also. For that I think you can use equal padding on both sides to make the rows look as if they are center-aligned.
Or
If you want you can place all your items in another div inside flex-container. Then you can justify-content: center the newly created div.
You can align items to the left with justify-content: flex-start; instead of justify-content: center but in order to center it all, you might need to start playing with margins and screen size.
If you open the below example on a full page, you will be able to see the expected result.
Please also note that you used id in multiple places (#squares) which could cause issues. I replaced it with a class.
.wrapper {
position: relative;
text-align: center;
height: auto;
background: #ff0000;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
}
.squares {
background: #00ff00;
width: 30%;
height: 100px;
flex: 0 31.33%;
margin: 1%;
}
#squares img {
max-height: 300px;
width: 100%;
}
#squares h5 {
margin: 20px 0;
}
<div class="wrapper">
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage1.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
<div class="squares">
<img src="images/galleryimage2.jpg"/>
</div>
</div>
Hello I'm trying to set up three columns and vertically and horizontally center the span in each of the columns. I've tried using flexbox and grid but it's not working out for me
https://imgur.com/a/D6Wbqe5
<div class="row">
<div class="column">
<span class="center">test</span>
</div>
<div class="column">
<span class="center">test</span>
</div>
<div class="column ">
<span class="center">test</span>
</div>
</div>
.row{
width:100%;
height:100%;
}
.column{
float:left;
width:33.33%;
height: 100%;
text-align: center;
}
You can use a combination of grid (for the outer layout) and flexbox for the columns content alignment:
* {
box-sizing: border-box;
}
.row {
background: black;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 48px;
align-items: center;
height: 100vh;
padding: 48px;
}
.column {
background: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
<div class="row">
<div class="column">
<span class="center">test</span>
</div>
<div class="column">
<span class="center">test</span>
</div>
<div class="column ">
<span class="center">test</span>
</div>
</div>
I'm trying to hide part of the div underneath another.
https://jsfiddle.net/71obhkzh/7/ shows what I have now.
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
}
#bottom {
height:100px;
width: 120px;
background-color: blue;
margin-top: -40px;
}
In the fiddle I used the negative margin-top to move the blue div up a bit, but it covers the bottom of the red div. I need the red one to be on top of blue one like this https://awwapp.com/b/unzo2gs6g/
Ok, if I add the z index as suggested it works on the fiddle, but in real app the colors are mixed like here
http://i67.tinypic.com/34pets8.png
I'm using bootstrap and the reality is bit more complicated (flex boxes in the top and bottom div with more content). I tried to set opacity on the top div but it did not help
real code (login container is the red one, info the blue one)
<div class="container">
<div class="row justify-content-center login-container">
<div class="col-6 login-box">login form here</div>
<div class="col-4 register-box">register box here</div>
</div>
<div class="d-flex justify-content-center info-container">
<div id="advantages" class="d-flex flex-column justify-content-center align-items-center">
some text
</div>
<div id="image" class="d-flex flex-column justify-content-center align-items-center">
<img src="some image"/>
</div>
</div>
</div>
https://jsfiddle.net/71obhkzh/31/
Make use of z-index.
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
z-index: 2
}
#bottom {
height:100px;
width: 200px;
background-color: blue;
margin-top: -40px;
z-index: 1
}
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>
Use z-index to do that:
#container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 300px;
}
#top {
height:100px;
width: 100px;
background-color: red;
z-index:2;
}
#bottom {
height:100px;
width: 120px;
background-color: blue;
margin-top: -40px;
z-index:1;
}
<div>
some stuff here
</div>
<div id="container">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div>
some stuff here
</div>