I'm trying to center a div vertically using flexbox but align-items:center; only changes the contents inside the div. I tried adding height:100% but still the same. what should I add/change in the code?
body {
background: url(images/pattern-background-mobile.svg);
background-repeat: no-repeat;
background-size: cover;
margin: 0;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
border: 2px solid red;
padding: 0;
margin: 2em;
width: 80%;
}
<body>
<div class="main">
<div class="container">
<div class="hero">
</div>
<h1 class="title">Order Summary</h1>
<p>You can now listen to millions of songs, audiobooks, and podcasts on any device anywhere you like!
</p>
<div class="container">
<h4>Annual Plan</h4>
<p>$59.99/year</p>
Change
</div>
<button>Proceed to Payment</button>
Cancel Order
</div>
</div>
</body>
Do you want to bring the whole thing? Actually I don't clearly understand your question. Still providing a solution. I guess it will help you.
body {
background: url(images/pattern-background-mobile.svg);
background-repeat: no-repeat;
background-size: cover;
margin: 0;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
border: 2px solid red;
padding: 0;
margin: 2em;
width: 80%;
}
.main{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<body>
<div class="main">
<div class="container">
<div class="hero">
</div>
<h1 class="title">Order Summary</h1>
<p>You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!
</p>
<div class="container">
<h4>Annual Plan</h4>
<p>$59.99/year</p>
Change
</div>
<button>Proceed to Payment</button>
Cancel Order
</div>
</div>
</body>
This should help. You have to add the flex classes to the container that surrounds the elements you want to center.
body {
background: url(images/pattern-background-mobile.svg);
background-repeat: no-repeat;
background-size: cover;
margin: 0;
height: 100%;
box-sizing: border-box;
}
main {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
padding: 0 10%;
}
.container {
border: 2px solid red;
width: 80%;
padding: 2% 5%;
margin-bottom: 2%;
}
<body>
<div class="main">
<div class="container">
<div class="hero">
</div>
<h1 class="title">Order Summary</h1>
<p>You can now listen to millions of songs, audiobooks, and podcasts on any
device anywhere you like!
</p>
<div class="container">
<h4>Annual Plan</h4>
<p>$59.99/year</p>
Change
</div>
<button>Proceed to Payment</button>
Cancel Order
</div>
</div>
</body>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
<header className='header'>
<div className='header--center'>
<h1>Title of the website</h1>
</div>
<div className='header--right'>
<p>Some text pushed to the right</p>
</div>
</header>
I want "Title of the website" to be centered and I want "Some text pushed to the right" to be pushed to the right of the container without messing up the centering of "Title of the website"
You can use flex boxes:
.header--right{display: flex;
justify-content: end;}
and:
.header--center{display: flex;
justify-content: center;}
For reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Also, you can use text-align on the p tag and the h1 tag
One way is
*,
*::before,
*::after {
box-sizing: border-box;
margin:0;
}
body{
min-height: 100vh;
overflow: hidden;
background-color: bisque;
}
p{
font-size: 3rem;
font-weight: 900;
}
.header-container{
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
}
.text-right{
margin-left: auto;
}
.text-center{
position: absolute;
}
.container{
position: absolute;
width: 50vw;
height: 100vh;
border: 5px solid black;
}
<div class="header-container">
<div class="text-center">
<p>CENTER</p>
</div>
<div class="text-right">
<p>RIGHT</p>
</div>
</div>
<div class="container"></div>
If you don't want to use position:absolute here is another way.
*,
*::before,
*::after {
box-sizing: border-box;
margin:0;
}
body{
min-height: 100vh;
overflow: hidden;
background-color: bisque;
}
p{
font-size: 3rem;
font-weight: 900;
}
.header-container{
display: flex;
flex-direction: row;
justify-content: center;
}
.text-right{
margin-left: auto;
}
.text-center{
margin-left: 50%;
transform: translate(-50%);
}
.container{
position: absolute;
width: 50vw;
height: 100vh;
border: 5px solid black;
}
<div class="header-container">
<div class="text-center">
<p>CENTER</p>
</div>
<div class="text-right">
<p>RIGHT</p>
</div>
</div>
<div class="container"></div>
Aim:
To shift the whole container/division/div to the center of my body.
Problem:
The container is stuck on the left side of the body after I reduced its width.
I had tried putting justify-content: center in the "big_container", but it didn't work
Hope to see some good feedback from dear mentors!
Code snippet:
.main_title {
display: flex;
justify-content: center;
padding-bottom: 20px;
}
.big_container {
width: 500px;
}
.outside {
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom right, #3d7bcc, #2fedea);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
height: 430px;
}
.paragraphs {
display: flex;
background-color: black;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
justify-content: center;
align-items: center;
}
.container_2 {
padding: 20px;
}
.text {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Sony Hedgehog</title>
<link href="sonic_style.css" rel="stylesheet">
<h1 class="main_title">Sony the Hedgehog</h1>
</head>
<body>
<div class="big_container">
<div class="outside">
<div class="image_container">
<!--useless class-->
<img src="./photo/sonic.jpeg" alt="A photo of sonic">
</div>
</div>
<div class="paragraphs">
<div class="container_2">
<div class="text_1 text">
<p><b>Game:</b>Sonic the Hedgehog</p>
</div>
<div class="text_2 text">
<p><b>Year:</b>1991</p>
</div>
<div class="text_3 text">
<p><b>Platform:</b>SEGA</p>
</div>
</div>
</div>
</div>
</body>
</html>
You only need to just add margin-left and margin-right to auto in .big_container class just like the following.
.big_container{
width: 500px;
margin-left: auto;
margin-right: auto;
}
You can try this:
<div class="big_container">
<div class="">
<div class="outside">
<div class="image_container">
<!--useless class-->
<img src="./photo/sonic.jpeg" alt="A photo of sonic">
</div>
</div>
</div>
<div class="paragraphs">
<div class="container_2">
<div class="text_1 text">
<p><b>Game:</b>Sonic the Hedgehog</p>
</div>
<div class="text_2 text">
<p><b>Year:</b>1991</p>
</div>
<div class="text_3 text">
<p><b>Platform:</b>SEGA</p>
</div>
</div>
</div>
</div>
<style>
.main_title{
text-align: center;
padding-top: 10px;
}
.big_container {
/* width: 500px; */
margin-top: 50px;
margin-bottom: 50px;
margin-right: auto;
margin-left: auto;
max-width: 500px;
}
.outside {
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom right, #3d7bcc, #2fedea);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
height: 430px;
}
.paragraphs {
display: flex;
background-color: black;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
justify-content: center;
align-items: center;
}
.container_2 {
padding: 20px;
}
.text {
color: white;
}
I edited my answer, because Vishnu Vinod Answer is best way to do it.
also in future I would suggest you to use & learn Bootstrap it has great documentation and is easy to learn how to use rows and cols to get wanted effect. It would be really easy to solve this problem with bootstrap
https://getbootstrap.com/docs/4.0/layout/grid/
HTML CODE
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<img src="img\xii.jpg" alt="phone1" />
<section class="section1">
<p>Xiaomi X15</p>
<br />
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<br />
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
CSS CODE
.flex-container {
display: flex;
background-color: #fff;
border: 2px solid black;
flex-wrap: wrap;
}
.wrapper {
width: 100px;
max-width: 960px;
margin: 0 auto;
}
.one p {
position: absolute;
bottom: -350px;
color: white;
font-size: 50px;
left: 500px;
text-align: center;
font-weight: lighter;
font-family: calibri;
}
.section1 h2 {
position: absolute;
bottom: -500px;
left: 300px;
color: white;
}
please help im a beginner in css and this is my first stackoverflow post
my texts are not horizantally in place and keeps breaking down that each word forms a new paragraph how can i solve this please? i have tried the display:inline- block but it didnt work.as you can see from my code i made the div tag that the image is on to be position relative so i can move the h2 and span and button elements to be nn the image. i intend on using flexbox because on i want to position more images to be on the side of the initial image
What you can do is:
Define some width and height (max-width and min-width to be more flexible) for your box;
Use background-image CSS prop instead of HTML <img />, which will ensure the image fills the background of your container;
Use flex-box with its all properties to lay out your elements. There will be no need for position: absolute for the text and header.
Other notes to your code: there are some closing tags missing in your HTML as well as closing } braces in the CSS. That is never a good practice to leave your code without them, even though in some cases the browser can fill them out for you.
Here is an example of how you can achieve what you were asking about:
.wrapper {
width: 100%;
max-width: 960px;
margin: 0 auto ;
display: flex;
justify-content: space-between;
}
.flex-container{
display: flex;
background-color:#fff;
border: 2px solid black;
flex-wrap: wrap;
width: auto;
height: 200px;
min-width: 100px;
max-width: 400px;
}
.one {
background-image: url('https://cdn.thewirecutter.com/wp-content/uploads/2018/05/smartphone-tp-top-2x1-lowres1024-7951.jpg');
background-size: cover;
}
.section1 {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.section1 p{
color: white;
font-size: 25px;
text-align: left;
font-weight: lighter;
font-family: calibri;
padding: 10px;
margin: 0
}
.section1 h2{
color: white;
padding: 10px;
margin: 0
}
button {
max-width: 100px
}
<div class="wrapper">
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
<div class="flex-container">
<div class="box one">
<section class="section1">
<p>Xiaomi X15 </p>
<h2>New Powerhouse Phone From The Xiaomi Brand</h2>
<button> BUY NOW</button>
</section>
</div>
</div>
</div>
[How to position text on the image correctly? i got three blocks of text which i want to position them on the same line on the image but i struggle with it :(
#banner {
justify-content: center;
height: 600px;
margin-top: 100px;
margin-left: 10%; }
.banner-text {
color: white;
justify-content: center;
justify-content: space-around;
text-align: center;
display: inline-block;
position: absolute;
flex-direction: column; }
/*DownTown*/
.flex-text {
background-color: grey;
text-align: center;
}
html
<div id="banner"><img src="2525.jpeg">
<div class="banner-text">
<div class="flex-text text1">
<h1><b>DownTown</b> 384 West 4th St Suite 108</h1>
<div class="flex-text text2">
<h1><b>East Bayside</b> 3433 Phisherman Avenue </h1>
<div class="flex-text text3">
<h1><b>Oakdale</b> 515 Crecent avenue Second Floor </h1>
</div>
</div>
</div>
</div>
</div>
here is how it should look
]2
and that's how i did it -_-
Your html markup is not correct and instead of adding image as an img element in the #banner, add the image as a background image using css. That way, you don't need position absolute to place text over the image. After that, use flexbox for aligning the elements.
#banner {
background-image: url(https://picsum.photos/500);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.banner-text {
color: white;
justify-content: space-around;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.flex-text {
background-color: #222;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
height: 180px;
padding: 20px;
width: 200px;
margin: 5px;
}
h1 {
margin: 0;
}
<div id="banner">
<div class="banner-text">
<div class="flex-text text1">
<h1>DownTown</h1>
<span>384 West 4th St</span>
<span>Suite 108</span>
<span>Portland, Maine</span>
</div>
<div class="flex-text text1">
<h1>DownTown</h1>
<span>384 West 4th St</span>
<span>Suite 108</span>
<span>Portland, Maine</span>
</div>
<div class="flex-text text1">
<h1>DownTown</h1>
<span>384 West 4th St</span>
<span>Suite 108</span>
<span>Portland, Maine</span>
</div>
</div>
</div>
Your markup is not right. So I changed it a bit. And I also changed the css accordingly and use flex for aliigning items. And instead of using img in html I use background property.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1200px;
height: 100vh;
margin: auto;
overflow: hidden;
padding: 1rem;
background: #333;
}
#banner {
margin-top: 100px;
}
.banner-text {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
/*DownTown*/
.flex-text {
background-color: rgba(0, 0, 0, 0.384);
line-height: 4rem;
padding: 4rem;
margin: 0rem 2rem;
text-align: center;
}
<div class="container">
<div id="banner">
<!-- <img src="2525.jpeg" /> -->
<div class="banner-text">
<div class="flex-text text1">
<h1>DownTown</h1>
<p>384 West 4th St</p>
<p>Suite 108</p>
</div>
<div class="flex-text text2">
<h1>East Bayside</h1>
<p>3433 Phisherman Avenue</p>
<p>(Norway Corner)</p>
</div>
<div class="flex-text text3">
<h1>Oakdale</h1>
<p>
515 Crecent avenue
</p>
<p>
Second Floor
</p>
</div>
</div>
</div>
</div>
The issue you have is the root diff i.e #banner has two child. The properties on #banner doesn't indicate in any way that the two items should overlap. You are trying to achieve that through position:absolute. Which is also an approach. But here's how you can achieve what you want in two ways:
Put that image as the background property for #banner and provide the flexbox properties to banner.
body {
margin: 0;
max-width: 100%;
}
#banner {
position: relative;
height: 600px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#banner img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
}
.banner-text {
position: relative;
width: 100%;
z-index: 2;
display: flex;
justify-content: space-around;
}
.flex-text {
background: #efefef;
}
h1 {
font-size: 17px;
}
<div id="banner">
<img src="https://cdn.slashgear.com/wp-content/uploads/2019/07/coffee_main_envat-1280x720.jpg">
<div class="banner-text">
<div class="flex-text text1">
<h1><b>DownTown</b><br/> 384 West 4th St Suite 108</h1>
</div>
<div class="flex-text text2">
<h1><b>East Bayside</b><br/> 3433 Phisherman Avenue </h1>
</div>
<div class="flex-text text3">
<h1><b>Oakdale</b><br/> 515 Crecent avenue Second Floor </h1>
</div>
</div>
</div>
Position your banner div relative. Then position your image as absolute so that it occupies whole width and banner-text should have relative positioning. One other thing you need to do if the text doesn't come to center is provide 100% width to the banner-text.
Hope this solves the problem
I have a CodePen Parallax example that works fine as is. But remove the display: none from line 9 in the CSS to show the header and footer and you get 2 scrollbars.
HTML:
<div class="outer">
<header><h1>Header</h1></header>
<div class="wrapper">
<div class="section parallax">
<h1>Heading</h1>
</div>
<div class="content">
<h1>Site Content</h1>
</div>
</div>
<footer><h1>Footer</h1></footer>
</div>
CSS:
body, html {
margin: 0;
padding:0;
}
/* remove the following to see the problem: */
header, footer {
display: none;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: 100%;
z-index: -1;
background-image: url('http://www.shainblumphoto.com/wp-
content/uploads/2016/02/dubai_1.jpg');
}
.content {
height: 200vh;
display: flex;
justify-content: center;
background: red;
}
Does anyone know what change to make to have one scrollbar that includes scrolling of the header and footer, without moving the header and footer to the wrapper, without JavaScript, and still maintain the parallax effect?
Please follow structure.
<div class="outer">
<div class="wrapper">
<header><h1>Header</h1></header>
<div class="section parallax">
<h1>Heading</h1>
</div>
<div class="content">
<h1>Site Content</h1>
</div>
<footer><h1>Footer</h1></footer>
</div>
</div>
Updated answer:
body,
html {
margin: 0;
padding: 0;
}
/* remove the following to see
the problem: */
.outer {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: white;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(2);
background-size: 100%;
z-index: -1;
background-image: url('https://via.placeholder.com/800');
}
.content {
height: 200vh;
display: flex;
justify-content: center;
background: red;
}
<div class="outer">
<header>
<h1>Header</h1>
</header>
<div class="wrapper">
<div class="section parallax">
<h1>Heading</h1>
</div>
<div class="content">
<h1>Site Content</h1>
</div>
</div>
<footer>
<h1>Footer</h1>
</footer>
</div>