Hi I want my circles to align over the end of my container. But I have a hard time aligning the content at the bottom with flexbox. Maybe you can help. I aling-content: end-flex does not work. Every time try it it aligns the circles somewhere in the middle. And does no space between the circles. I am new to flexbox so maybe I over see a simple solution.
.wrapper-project{
display:flex;
flex-direction: column;
}
.project-pill{
z-index: 0;
position: relative;
margin: 0 auto;
border-radius: 4vw;
background-color: #DBDDDC;
width: 25vw;
min-height: 35vw;
position: relative;
}
.project-pill:hover{
box-shadow:10px 10px 10px grey;
opacity: 1%;
transform: scale(1.2);
}
.image{
border-radius: 4vw 4vw 0 0;
width: 95%;
padding-top: 2%;
height: 40%;
margin-left: auto;
margin-right: auto;
}
.content{
position: absolute;
width: 100%;
font-size: 1.2vw;
height: 100%;
text-align: center;
font-family: poppins;
}
.text{
overflow: hidden;
}
.flex-circles{
display: flex;
align-items: center;
justify-content: center;
}
.circle{
margin-bottom: auto;
width:30%;
border-radius:50%;
padding-bottom:30%;
z-index: 1000;
background-image: url(https://www.demaesschalckgoethals.be/files/images/
01a59d76ec5642699cdbb25466
9ed025.jpg);
background-size:cover;
background-repeat: no-repeat;
}
<div class="wrapper-project">
<div class="project-pill">
<div class="content">
<img class="image"
src="https://www.demaesschalckgoethals.be/files
/images/01a59d76ec5642699cdbb2546
69ed025.jpg"/>
<div class="text">
<p>test</p>
</div>
<div class="flex-circles">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</div>
Here is a example.
https://jsfiddle.net/RoelVoordendag/hmjvoLzb/1/
You need flex in .content. If you have it on .flex-circles, and given your HTML structure, the circles will never be at the end of the container as you want it:
display: flex;
flex-direction: column;
justify-content: space-between;
This is your code updated:
https://jsfiddle.net/hmjvoLzb/16/
Is this closer to what you wanted to achieve? Hope it helps.
Related
I am trying to make it so the second section or the first section will align center with the top.
What I don't understand is the relationship between items with display flex vs items that have display block.
First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?
Link To Pen: https://codepen.io/skella1/pen/vYZLdVN
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.
Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.header p {
position: absolute;
top: 0;
right: 20px;
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
}
.secHeader h1 {
text-transform: uppercase;
font-weight: 900;
}
.content {
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.content .login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
<div class="header">
<img src="https://via.placeholder.com/100x50" alt="">
<p>Text Goes Here</p>
</div>
<div class="secHeader">
<h1>Welcome</h1>
<p>This is a page to login</p>
</div>
<div class="content">
<div class="login">
<p style="padding-right: 10px;">Login</p>
<input type="text">
<button>Login</button>
</div>
</div>
Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about
body {
margin: 0px;
padding: 0px;
}
.header {
height: 50px;
width:100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px;
img {
margin: 0 auto;
transform:translate(50%,0%); /* MODIFIED CODE HERE */
}
}
.secHeader {
background-color: #ddd;
text-align: center;
display: block;
line-height: 0px;
padding: 20px;
h1 {
text-transform: uppercase;
font-weight: 900;
}
}
.content{
background: url("http://www.placebear.com/500/300") center center no-repeat;
background-size: cover;
height: 100vh;
max-width:100vw; /* MODIFIED CODE HERE */
position: relative;
.login {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
justify-content: center;
flex-direction: row;
align-items: center;
display: flex;
}
}
If you're insisting on using flexbox for the header, what you can do is the following:
<div class="header">
<div>
</div>
<div class="text-center">
<img src="https://via.placeholder.com/100x50" alt="">
</div>
<div class="text-right">
<p>Text Goes Here</p>
</div>
</div>
.header {
height: 50px;
display:flex;
padding: 0px;
justify-content: space-between;
div {
flex:1;
}
div.text-center {
text-align:center;
}
div.text-right{
text-align:right;
}
}
Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 2 years ago.
So i've got div looking like this. My question is how can I align h1 so it stays always on top of this div and rest of content is aligned in the middle of div like how it is now?
HTML:
<div class="container">
<h1>INFO</h1>
<div class="info"><h2>Age</h2><p>20</p></div>
<div class="info"><h2>Adress</h2><p>Wolna 23, Warszawa</p></div>
<div class="info"><h2>Email</h2><p>lorem#gmail.com</p></div>
<div class="info"><h2>Phone</h2><p>669 133 777</p></div>
</div>
CSS:
.container
{
align-items: center;
justify-content: center;
display:flex;
flex-direction: column;
width: 35.5%;
height: 550px;
padding: 20px;
margin: 20px;
}
.info
{
align-items: center;
justify-content: center;
display:flex;
flex-direction: column;
margin: 0 0 15px 0;
}
Can you please check the below code link? Hope it will work for you. We can solve this issue with the help of flex, without using position: absolute;.
You need to remove justify-content: center; from the .container.
We have wrapped all info items in one div like .content and give margin:auto; to them.
Please refer to this link:
https://jsfiddle.net/yudizsolutions/z71rbu6o/7/
.container {
align-items: center;
display: flex;
flex-direction: column;
width: 35.5%;
height: 550px;
padding: 20px;
margin: 20px;
background: #000;
}
h1 {
color: #fff;
}
.content {
margin: auto;
}
.info {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0 0 15px 0;
color: #fff;
}
.info h2,
.info p {
margin: 0;
}
<div class="container">
<h1>INFO</h1>
<div class="content">
<div class="info">
<h2>Age</h2>
<p>20</p>
</div>
<div class="info">
<h2>Adress</h2>
<p>Wolna 23, Warszawa</p>
</div>
<div class="info">
<h2>Email</h2>
<p>lorem#gmail.com</p>
</div>
<div class="info">
<h2>Phone</h2>
<p>669 133 777</p>
</div>
</div>
</div>
Try adding this:
.container h1{
position: absolute;
top: 0vh;
}
if you want to stick it to the top add this:
h1{
position: absolute;
top: 0;
}
Edit: there are a lot of ways, but in all of them you must to take the header out of the flexbox. You can do it like this:
.container {
box-sizing: border-box;
position: relative;
width: 35.5%;
height: 600px;
background-color: coral;
padding: 20px;
}
.info {
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0 0 15px 0;
}
.wrapper {
position: relative;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
height: 450px;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: cadetblue;
width: 100%;
}
.header {
position: absolute;
top: 0;
left: 50%;
margin-top: 0;
transform: translateX(-50%);
background-color: cadetblue;
}
p {
margin: 0.5rem;
}
<div class="container">
<h1 class="header">INFO</h1>
<div class="wrapper">
<div class="info">
<h2>Age</h2>
<p>20</p>
</div>
<div class="info">
<h2>Adress</h2>
<p>Wolna 23, Warszawa</p>
</div>
<div class="info">
<h2>Email</h2>
<p>lorem#gmail.com</p>
</div>
<div class="info">
<h2>Phone</h2>
<p>669 133 777</p>
</div>
</div>
</div>
I want to display images inside a container that has a colored background.
I want the background of the container is rounded, and the image is placed at the center.
Also, there is space between the border of the background and the image.
This is the goal:
img
The code so far:
.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 50px;
display: table-cell;
vertical-align: middle;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>
this is what I achieved so far:
img
you need to remove display: table-cell rule and additionaly you can shrink the image.
.circle{
border-radius: 50%;
background: #2e374f;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 150px;
width: 150px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
.img {
max-width: 50%;
max-height: 50%;
}
<div class="circle">
<img src="https://picsum.photos/100/100?grayscale" class="mx-auto d-block img">
<div class="title">
TITLE
</div>
</div>
Please check.
.container-box {
width: 400px;
height: 400px;
background-color: black;
}
.container-circle {
display:inline-block;
margin: 50px;
width: 300px;
height: 300px;
border-radius: 150px;
background-color: gray;
}
.image {
background: url(https://upload.wikimedia.org/wikipedia/commons/c/ce/Font_Awesome_5_solid_arrow-circle-right.svg);
width: 100px;
height: 100px;
display: inline-block;
margin: 100px;
}
<div class="container-box">
<div class="container-circle">
<div class="image">
</div>
</div>
</div>
`
If I see correctly you want the image to be round and not the container. In this case this should help you out:
.circle img {
border-radius: 50%;
max-width: 100%;
}
.circle{
background: #2e374f;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
height:100px;
width: 100px;
}
.title{
color: #ffffff;
font-size: 10px;
text-align: center;
margin-top: 5px;
opacity: 0.5;
}
<div class="circle">
<img src="https://www.fillmurray.com/50/50" class="mx-auto d-block">
<div class="title">
TITLE
</div>
</div>
I have met some problems while doing a image-viewer project. The problem is that my buttons and the image are not following justify-content property, which they don't distributed equally inside my div block, how could it be solved? Also the image is not centered as the title does despite I set the align item property. I dow know how to fix that. I've searched over the website for solutions but none of them seems working.
Could anyone help me, please? Thanks in advance.
Here are the html and css code:
<div class="image-viewer__container">
<div class="image-viewer__title">Image Viewer</div>
<div class="image-viewer__main">
<div class="image-viewer__button"><img src="./images/back.png" id="previous" /></div>
<div class="image-viewer__display" style="background-image: url(./images/loading.gif);background-repeat: no-repeat; background-position: center;">
<img src="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" id="display">
<div class="image-viewer__display-source-wrapper">
<span><a href="https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF" target="_blank">
https://scontent.ftpe7-2.fna.fbcdn.net/v/t1.0-0/p640x640/119893827_3212042898922322_5684339818610522875_o.jpg?_nc_cat=104&_nc_sid=730e14&_nc_ohc=fGG3wRqLaLEAX8MrIY-&_nc_ht=scontent.ftpe7-2.fna&tp=6&oh=36c5e163223a1e8abca79a2b3892c915&oe=5F976AFF</a>
</span>
</div>
</div>
<div class="image-viewer__button"><img src="./images/next.png" id="next" /></div>
</div>
</div>
.image-viewer__container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.image-viewer__title {
font-size: 5rem;
font-weight: 600;
color: #615dec;
margin: 0;
margin-top: 2rem;
}
.image-viewer__main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: auto;
}
.image-viewer__button {
display: inline;
background: none;
border: none;
border-radius: 50%;
}
.image-viewer__button img {
width: 80px;
height: 80px;
border: 1px solid transparent;
border-radius: 50%;
cursor: pointer;
}
.image-viewer__display {
position: relative;
padding: 15px;
margin: 3rem;
max-width: 80rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
font-size: 0.6rem;
}
.image-viewer__display-source-wrapper {
position: absolute;
font-size: 12px;
left: 50%;
margin-right: 50%;
transform: translate(-50%, -50%);
min-width: 100em;
text-align: center;
bottom: 0;
}
#display {
object-fit: contain;
width: 50rem;
height: 30rem;
margin-bottom: 1rem;
}
#source {
display: inline;
color: black;
}
This is because you've set a fixed width to your image. By setting the main image to 100% the image will fit and fill up the remaining space so the 3 elements are always distributed equally.
main image size = full width - both your arrows
current
#display {
object-fit: contain;
width: 50rem; /*fixed width*/
height: 30rem; /*fixed width*/
margin-bottom: 1rem;
}
amended
#display {
margin-bottom: 1rem;
width: 100%; /*was added*/
height: auto; /*was added*/
}
jsFiddle
Add css float:"right" in css button.
I'm having a little trouble centering DIVs using flexbox, only in safari. I thought it may be lacking a -webkit- but it seems safari needs -webkit- only?
Here is the code so far, both classes are a child of .alltext so they can be called within the same javascript.
<div class ="container">
<div class = "alltext textone">
<p>Text here</p>
</div>
<div class = "alltext texttwo">
<p>Text here</p>
</div>
</div>
CSS:
.alltext {
color: black;
display: hidden;
}
.centertext {
margin-right: none;
margin-left: none;
display: flex;
display:-webkit-flex;
display:-webkit-flexbox;
display:-ms-flexbox;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
vertical-align: center;
position: fixed;
top: 0;
margin: auto;
margin-top: 0;
}
.textone {
position: relative;
max-width: 95%;
text-align: center;
font-size: 6em;
}
.texttwo {
width: 85%;
text-align: center;
font-size: 6em;
}
Thanks
Perhaps this is what you were looking for?
div{
box-shadow:inset 0px 0px 0px 1px red;
}
.container{
display:-webkit-flex;
display:-ms-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left:0;
}
.textone{
position: relative;
max-width: 95%;
text-align: center;
font-size: 6em;
}
.texttwo {
width: 85%;
text-align: center;
font-size: 6em;
}
<div class="container">
<div class="alltext textone">
<p>Text here</p>
</div>
<div class="alltext texttwo">
<p>Text here</p>
</div>
</div>