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>
Related
I made this layout but I can't find a way to align the circles and the text on the same line. As you can see in the first picture there's a problem both with circles and text. I'd like to achive the result you see in the 2nd picture.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 980px;
width: 100%;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
width: 250px;
height: 250px;
border: 0.5px solid;
border-radius: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
box-shadow: 0px 0px 15px 0px;
overflow: hidden;
margin: 0 auto 1em;
}
.circle img {
width: 100%;
position: relative;
height: 100%;
}
h3 {
text-align: center;
}
.inner {
text-align: start;
padding-bottom: 15%;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani <br> Marta Montanini</h3>
</div>
</div>
</div>
First, you will have to remove your manual line breaks <br>. Once you do this, the text can wrap automatically without having odd breaks at specific breaking points. If you want to force a line break, use horizontal padding on .caption h3.
Once you do this, just use align-items: self-start; on .grid.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
align-items: self-start;
max-width: 980px;
width: 100%;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
width: 250px;
height: 250px;
border: 0.5px solid;
border-radius: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
box-shadow: 0px 0px 15px 0px;
overflow: hidden;
margin: 0 auto 1em;
}
.circle img {
width: 100%;
position: relative;
height: 100%;
}
.caption h3 {
text-align: center;
padding: 0 2em;
}
.inner {
text-align: start;
padding-bottom: 15%;
}
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani Marta Montanini</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani Longer TEXT...........................</h3>
</div>
</div>
</div>
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani Marta Montanini more text lorem foo</h3>
</div>
</div>
</div>
</div>
I wan't to add a p like this.
I can add it, but when I use margin-top to put it down, it affects the elements above like this.
I don't know how to solve this.
Thank you.
HTML.
<main>
<section class="home">
<div class="presentation">
<p class="hello">HELLO THERE</p>
<p>I'm Lautaro Rojas</p>
<p>Web developer</p>
<p class="scroll">SCROLL DOWN</p>
</div>
<div class="presentation-buttons">
<button>LATEST PROJECTS</button>
<button>MORE ABOUT ME</button>
</div>
</section>
</main>
CSS:
main {
width: 100%;
height: 100%;
.home {
width: 100%;
height: 100%;
background-image: url("../img/bg.jpg");
background-size: cover;
display: flex;
align-items: center;
.presentation {
width: 70%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 5px;
p {
width: 50%;
margin: 0;
text-align: left;
color: $WHITE;
font-family: Merriweather-Regular;
font-size: 70px;
letter-spacing: 2px;
}
p[class="hello"] {
font-size: 30px;
color: $PINK;
}
p[class="scroll"] {
margin-top:180px;
font-size: 10px;
}
}
}
}
position: absolute; is your friend...
<main>
<section class="home">
<div class="presentation">
<p class="hello">HELLO THERE</p>
<p>I'm Lautaro Rojas</p>
<p>Web developer</p>
<p class="scroll">SCROLL DOWN</p>
</div>
<div class="presentation-buttons">
<button>LATEST PROJECTS</button>
<button>MORE ABOUT ME</button>
</div>
</section>
</main>
main {
width: 100%;
height: 100%;
.home {
width: 100%;
height: 100%;
background-image: url("../img/bg.jpg");
background-size: cover;
display: flex;
align-items: center;
.presentation {
width: 70%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 5px;
position: relative;
p {
width: 50%;
margin: 0;
text-align: left;
color: $WHITE;
font-family: Merriweather-Regular;
font-size: 70px;
letter-spacing: 2px;
}
p[class="hello"] {
font-size: 30px;
color: $PINK;
}
p[class="scroll"] {
margin-top:180px;
font-size: 10px;
position: absolute;
}
}
}
}
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.
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.
I have a div inside a div which has content in it (content created dynamically) I have gotten the child div to center vertically but can't vertically center the content inside. I am using Bootstrap.
.main {
position: relative;
min-height: 600px;
width: 100%;
margin: 0; padding: 0;
}
#content {
position: absolute;
display: inline-block;
text-align: center;
margin: auto;
max-width: 60%;
top: 50%;
right: 0;
left: 0;
bottom: 0;
transform: translateY(-50%)
}
#content p {
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #fff;
}
<div class="row">
<div class="main">
<div id="content">
<p> text content </p> ( this is inputted by Wordpress/post )
</div>
</div>
</div>
You can use a flexbox:
.main {
min-height: 300px;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
#content {
background-color: rgba(0, 0, 0, 0.4);
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#content p {
color: white;
}
<div class="row">
<div class="main" style="">
<div id="content">
<p> text content </p>
</div>
</div>
</div>
The better solution will always be to use flexbox which comes out of the box in CSS3.
Just use the following class:
#content p {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #000;
}
Alternatively,
You can put the min-height of the class "main" to a 150% instead of 600px.
.main {
position: relative;
min-height: 150%;
width: 100%;
margin: 0; padding: 0;
}
That would be the easiest solution.
Try adding a style something like this, bootstrap don't have that kind of functionality, its up to the user do the job.
.center {
margin: auto;
height: 65%;
}
Hope this help