I am using display: flex for a page with a header, main, and footer. The issue I am running into is that the main is not vertically centered and is lower than I'd want it to be. I can't seem to figure out the best way to go about this and I've messed with the padding and margin to align it, however is there a better way?
body {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.header-main {
width: 100%;
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.footer-main {
width: 100%;
text-align: center;
min-height: 50px;
}
.error-wrapper {
text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header class="header-main">
<h1 class="header-title">TITLE</h1>
<ul class="header-elements">
<li>
ABOUT
</li>
</ul>
</header>
<main class="error-wrapper">
<p id="error-segment">404</p>
<h1 id="message-segment">PAGE NOT FOUND</h1>
</main>
<footer class="footer-main">
<p class="footer-text">footer</p>
</footer>
</body>
</html>
Related
I fail to get the image (logo) in the center of the top bar!! I tried everything, I used align-self: center; , display:block; but no luck!! I don't know what i'm missing here!
codesandbox Link to the code for better viewing
The code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<style>
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer{
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
}
.logo-image {
width: 20%;
height: 10%;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img
src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
class="logo-image"
/>
</a>
</div>
</header>
</div>
</body>
</html>
Add the following CSS:
.logo-image-cont {
display: flex;
justify-content: center;
}
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Tajawal:wght#200;300;400;500;700;800;900&display=swap');
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer {
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont {
display: flex;
justify-content: center;
}
.logo-image {
width: 20%;
height: 10%;
}
.emailSection {
display: flex;
justify-content: center;
align-self: center;
align-content: center;
font-family: 'Tajawal', sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img src="https://i.ibb.co/jwjBMnS/Kia-logo.png" class="logo-image">
</div>
</header>
<section class="emailSection" id="sec-3cf1">
<div>
</div>
</section>
<footer class="emailFooter">
<div class="footerCopyrightCont">
</div>
</footer>
</div>
</body>
</html>
Add
display: flex;
justify-content:center;
inside your logo-image-con div block
Link to corrected code
add text-align: center; to .logo-image-cont
Replace the css class with this
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
display: flex;
}
.logo-image {
width: 20%;
height: 10%;
margin: 0 auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<style>
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer{
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
display: flex;
}
.logo-image {
width: 20%;
height: 10%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img
src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
class="logo-image"
/>
</a>
</div>
</header>
</div>
</body>
</html>
I'm starting to learn web development from here.
Currently, I am working fidgeting around with the code shown below to understand flexbox better.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
Relevant CSS code:
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
The webpage looks like this:
I want to know how do I right or left align the main div in the background? Which style/command does one use for this?
EDIT: I know how to align the smaller squares present inside the div. I want to know how do I align the big blue-ish rectangle in the background of the containers to the right or the left. By default its centered. Apologies if that was not clear in the question before.
You have left and right margin defined at auto right now so it's currently centered. You can set margin-left: auto; for it to be right-aligned, and do the opposite for it to be left-aligned.
body {
font-family: 'Open Sans', sans-serif;}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin-left: auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/* justify-content: flex-end; */
flex-wrap:wrap;
}
#container div{
height:200px;
width: 200px;
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Playground</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Let's Play With Flexbox</h1>
<section id="container">
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</body>
</html>
For left align align-items: flex-start; and
align-items: flex-end; for right align.
body {
font-family: 'Open Sans', sans-serif;
}
h1 {
text-align: center;
}
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
/*right align*/
align-items: flex-end;
/*left align*/
/* align-items: flex-start; */
/* justify-content: flex-end; */
flex-wrap: wrap;
}
#container div {
height: 200px;
width: 200px;
}
Right align
if you want that the elements in your section get aligned to the right you should add :
align-items: flex-end;
your section css should be like so :
#container {
background-color: #003049;
width: 90%;
height: 500px;
margin: 0 auto;
border: 5px solid #003049;
display: flex;
flex-direction: column;
align-items: flex-end;
flex-wrap:wrap;
}
HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>
CSS:
body {
margin:0;
padding:0;
display:flex;
justify-content: center;
align-items: center;
}
.container {
background-color: green;
border:1px solid black;
width:80vw;
height:80vh;
}
In the above code I am trying to align my div content to display in the center but it is not displaying what changes should I make to do so.
You forgot to add height for the body.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
This will solve your issue.
If you want to use the same flex command you must add a height property.
For example:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Is there a way to stop the span from going to a new line when the parent is flex-direction: column?
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">Taken with natural breathing
<span class="asterisk-weight-normal">*</span></h2>
<!--content-->
</div>
You can change the h2's display property to inline-block. It will work.
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<body>
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
</h2>
<!--content-->
</div>
<script src="index.js"></script>
</body>
</body>
</html>
You should use display:contents
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-content-column__title .asterisk-weight-normal {
display: contents;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
<span>extra column</span>
<span>extra column</span>
</h2>
<!--content-->
</div>
I'm developing a web UI that currently has a blue banner. However, when I try to modify its size in the CSS chunk below, it doesn't update. Before, in the code below, background-size was set to cover, but I need the height of the banner to shrink.
#header {
background-color: #04f;
color: rgba(255, 255, 255, 0.75);
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 8em 0 6em 0;
background-size: 20px 20px;
background-position: center top;
background-attachment: fixed;
text-align: center;
position: relative;
cursor: default;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Author Script by SANDERS</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="static/main.css?version=1" />
</head>
<body>
<!-- Header -->
<header id="header" class="alt">
<div class="inner">
<h1>Sanders Author Script</h1>
<p>A free author formatting script by Stephan J. Sanders</p>
</div>
</header>
</body>
</html>
You can add height property to the css ID.
#header {
background-color: #04f;
height : 500px;
width : 100%;
}