Given I have the html and css in the snippet below the question, how can I vertically centre the login view no matter what screen height is?
I have tried this for the .login-layout__positioner class:
.login-layout__positioner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 42%;
transform: translateY(-42%);
}
But this does not centre well in large screen heights?
Is there a better way?
body {
height: 100%;
background-color: #f7f7f4;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
background-color: #fff
}
.banner__top {
padding-top: 15px;
}
.login-layout__container {
background-color: #f7f7f4;
width: 100%;
}
.login-layout__positioner {
text-align: center;
margin: auto;
}
footer {
background-color: #0065bd;
}
a {
color: #fff;
}
ul {
list-style: none;
margin-left: 0;
}
li {
display: inline;
}
.form__group {
background-color: #fff;
}
<body>
<div id="root">
<div class="main-content">
<div class="app-layout__body">
<div class="app-layout__container">
<div class="banner__container">
<div class="banner__top">
<div>
<div>
<h2>Banner</h2></div>
</div>
</div>
</div>
<div class="login-layout__container">
<div class="login-layout__positioner">
<div class="form__group">
<div>
<form>
<div class="login__container">
<div class="login__wrapper">
<div>
<div>
<div class="login__form__elements">
<div>
<div>
<h2 class="">Sign In</h2></div>
</div>
<div>
<div>
<div>
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div>
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
<div id="email-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div>
<div>
<label for="password" id="password-label">Password</label>
<div>
<input type="password" autocomplete="off" id="password" name="password" aria-invalid="false" aria-describedby="password-error" value="">
</div>
<div id="password-error" aria-hidden="true" role="alert"></div>
</div>
</div>
</div>
<div>
<div><a to="/">Forgotten your password?</a></div>
<div>
<button type="submit">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer>
<div>
<div>
<div>
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
</body>
When it comes to centering something both vertically and horizontally I like to use css flex. Adding it to the parent container surrounding the element you wish to center will cause it to flex in all screen dimensions and heights. Justify-content centers it horizontally and align-items centers it vertically. Here is a helpful guide to learn more about flex:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent-container{
width:100vw;
height:100vh;
background-color:black;
display:flex;
justify-content:center;
align-items:center;
}
.child{
width:50%;
background-color:white;
text-align:center;
}
<div class="parent-container">
<div class="child">
<h1>Centered</h1>
</div><!-- child -->
</div><!-- parent-container -->
Flexbox and grid work great for this, the difference being that grid is said to be 2 dimensional whereas flexbox is 1 dimensional. See MDN's Relationship of flexbox to other layout methods. BTW: If you want a sticky footer add min-height: 100vh; to your container.
Both Ron and Jeh's answer are correct. Though I'm wondering why do you have so many container wrappers then if you can just use certain wrappers to display your entire login form, banner and footer.
Here's my template for my custom login forms.
You will noticed that I use calc on height to differentiate the height of banner and footer and then less it to the height of your .section-login container, in which it will automatically adjusted the height no matter what the browser height does. And I declared min-height just to avoid overlaying above to each container wrapper.
Hope this helps.
.login {
background: pink;
margin: 0;
padding: 0;
}
.body-wrapper {
background: white;
width: 100%;
height: 100vh;
}
.hero-wrapper,
.globalfooter {
background: #CCC;
text-align: center;
}
.hero-wrapper {
line-height: 200px; /* just for the text v-alignment only */
height: 200px;
}
.globalfooter {
line-height: 100px; /* just for the text v-alignment only */
height: 100px;
}
.section-login {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #EEE;
min-height: calc(100% - (200px + 100px));
padding: 30px;
box-sizing: border-box;
}
.help-text-wrapper {
font: 300 12px sans-serif;
color: red;
text-align: center;
margin: 15px 0 0;
}
.help-text-wrapper.hidden {
/* Remove comment to enable
display: none; */
}
h1 {
font: 600 24px sans-serif;
text-align: center;
text-transform: uppercase;
margin: 0 0 15px;
}
form {
background: #FFF;
font: 300 12px sans-serif;
text-transform: uppercase;
width: 260px;
padding: 30px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.50);
box-sizing: border-box;
border-radius: 3px;
}
form > fieldset {
margin: 0 0 15px;
padding: 0;
border: 0;
}
form > fieldset label:first-child {
display: block;
margin-bottom: 15px;
}
form input {
display: block;
width: 100%;
height: 30px;
margin: 5px 0;
padding: 6px;
box-sizing: border-box;
}
form button {
display: block;
background: #888;
color: #FFF;
text-transform: uppercase;
height: 30px;
margin: auto;
padding: 7px 15px;
border: 0;
cursor: pointer;
}
<body class="login page">
<div class="body-wrapper">
<header class="hero-wrapper">
Banner
</header>
<section class="section-login">
<h1>Sign In</h1>
<form action="" method="post">
<fieldset>
<label for="username">
Username
<input type="text" id="username" value="" placeholder="Username" autofocus>
</label>
<label for="password">
Password
<input type="password" id="password" value="" placeholder="Password">
</label>
</fieldset>
<button type="submit">Login / Sign In</button>
</form>
<div class="help-text-wrapper hidden">
Something around here after fallback.
</div>
</section>
<footer class="globalfooter">
Footer
</footer>
</div>
</body>
Just change some class properties which I wrote down:
.login-layout__positioner {
display: flex;
align-items: center;
justify-content: center;
}
.form__group {
background-color: transparent;
}
a {
color: #333;
}
footer a {
color: #fff;
}
Related
This question already has answers here:
Center image using text-align center?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
For a long time, I am trying to resolve this issue but I was not able to find a good solution for this. I need to align this image on the center of the form but I am totally unsuccessful in it. You may feel like I am elaborating too much, but this is because StackOverflow is not letting me post this question because it thinks that this question needs deep elaboration. I don't know why.
This is my HTML:
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
This is my CSS:
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
How can I align the image in the center? I have tried many ways. But I am not able to do it. I have tried aligning using display flex property and tried aligning it in the center and tried to justify the content in the center!
.imagecontainer {
text-align: center;
}
Will do the job.
Adding text-align:center should solve your problem -
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer" style="text-align:center">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
display: flex;
justify-content: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
You need to use the flex property on the parent.
Add this to your css
.imagecontainer {
display: flex;
justify-content: center;
}
Just use margin
html, body {
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: orange;
}
.form-container {
display: block;
width: 70vw;
height: 70vh;
padding-bottom: 150px;
}
form {
border: 3px solid #f1f1f1;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
padding: 14px 20px;
margin: 8px 0;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.imagecontainer {
text-align: center;
}
img.avatar {
width: 20%;
}
.container {
padding: 16px;
}
<body>
<div class="wrapper">
<div class="form-container">
<h2>Login Form</h2>
<br>
<form action="" class="login-form">
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg"
alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</body>
Try to use margin:auto on imagecontainer div.
You can make use of <center> tag.
<center>
<div class="imagecontainer">
<img src="https://raw.githubusercontent.com/EdiTechStudio/Beta-ETS/master/favicon.svg" alt="Avatar" class="avatar">
</div>
</center>
Just place the above code in place of imagecontainer div. You need to wrap the div in center tag.
My image separator covers the whole separator container on my first 2 html. But it doesn't work on the third one. On the third html there are 8 div rows and in each row there are 3 div columns. Some selectors are not found on the given css because i use it for 4 htmls
/*----------------REMINDERS------------------*/
/*Standard rule: Styles and layout of a webpage
should look like itself until window reaches 992px*/
/* To test responsiveness:
> On browser: press f12 to see dev tools
> click on the second icon to toggle responsive layout
> set width to 992px and leave the height to blank to get the max height of current window
(You can also choose desired device to test with.
Just click the dropdown beside current window width)
*/
/*Now on 991px, the design and layout should change to mobile view*/
/*Read more about "CSS Media Queries" to control styles on specific window sizes*/
/*------------------------------------------*/
/*Reset all styles of elements*/
*{
margin: 0;
padding: 0;
}
/*Observe this container on sections*/
.main-container {
width: 80%; /*This will always get the 80% of the body*/
margin: auto; /*To center element*/
}
/*Navigation*/
nav {
font-size: 0;
background-color: #ffdead;
position: fixed; /*Navigation will stay on top even on scroll*/
width: 100%;
box-shadow: -1px -8px 9px 9px; /*Shadow under navigation, this gives illusion that this element float*/
/*The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.*/
z-index:2; /*This will force other elements to stay on lower stack (higher numbers will do)*/
}
nav ul a li {
/*tdisplay: inline-block;o position li horizontally
(if this cause problems, you may use "vertical-align: top;" so it will stay at the same vertical position )*/
display: inline-block;
/*vertical-align: top;*/
padding: 10px;
transition: all .5s; /*animate on hover*/
}
nav ul a li:hover {
color: maroon;
}
nav ul a {
font-family: Garamond;
font-size: 20px;
font-weight: bolder;
color: maroon;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
}
li.active {
border-bottom: 5px solid maroon;
color: black;
}
/*Banner*/
.banner-container {
background-image: url("../images/banner.jpg");
background-size: cover; /*This will cover the whole container even on window resize*/
background-repeat: no-repeat;
background-attachment: fixed; /*To create parallax effect*/
background-position: bottom;
height: 370px;
}
/*Welcome*/
.welcome-container {
font-size: 35px;
padding-top: 70px;
text-align: center;
}
.welcome-container h1 {
letter-spacing: 3px; /*to adjust letter spacing*/
border-bottom: 2px solid #ffdead;
color: maroon;
padding-bottom: 20px;
font-size: 30px;
/*Set texts to uppercase*/
text-transform: uppercase; /*Always rely to set text-transform on styles and not directly to HTML*/
}
.welcome-container p {
margin-top: 20px;
color: maroon;
padding: 15px;
font-size: 18px;
}
/*Articles*/
.articles {
font-size: 0;
padding-top: 200px;
}
.articles h1 {
letter-spacing: 3px;
text-transform: uppercase;
border-bottom: 2px solid #e59866;
color: maroon;
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
}
.article-item-container {
width: 33.33%; /*To get 1/3 of the .main-container*/
margin-top: 20px;
display: inline-block;
vertical-align: top;
}
.article-box {
background: #ffdead;
border-radius: 5px;
width: 90%; /*Get 90% width from 33.33%*/
margin: auto;
transition: all .325s; /*Animate on hover*/
}
.article-box:hover {
background: #f0b27a;
color: maroon;
}
/* ".article-content a" (child element of ".article-box") will
change color whenever mouse hovers on ".article-box" (parent element of ".article-content a") */
.article-box:hover .article-content a {
color: maroon;
}
.article-title {
font-size: 20px;
text-transform: uppercase;
text-align: center;
padding-top: 20px;
letter-spacing: 3px;
}
.article-content {
font-size: 13px;
text-align: center;
padding: 20px 5px;
}
.article-content a {
font-size: 12px;
margin-left: 5px;
color: gray;
text-decoration: none;
font-style: italic;
transition: all .325s;
}
div.row.column.text {
text-align: left;
background-color: maroon;
color: darkgray;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.row .column input[type=text] {
background-color: #212121;
border: none;
color: white;
padding: 1px 5px;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 10px;
width: 86px;
height: 35px;
}
div input[type=button] {
background-color: #7b241c;
border: none;
color: white;
padding: 1px 5px;
text-align: center;
text-decoration: none;
font-size: 1px;
width: 85px;
height: 30px;
position: relative;
}
h6 {
text-align: left;
text-transform: uppercase;
font-family: Verdana;
font-size: 10px;
color: maroon;
}
h5 {
font-size: 14px;
font-family: Garamond;
color: black;
text-align: auto;
text-transform: uppercase;
}
h3 {
padding-top: 3px;
text-align: center;
font-size: 15px;
margin-left: 5px;
color: maroon;
text-decoration: none;
font-family: Georgia;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
.row{
display: flex;
padding-top: 20px;
}
.column {
flex: 33.33%;
padding: 5px;
margin:auto;
}
/*Image Separator*/
.separator-container {
margin-top: 40px;
background-image: url("../images/background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Same effect on banner*/
background-position: center;
height: 400px;
}
/*Set dark overlay on separator*/
.overlay {
background-color: ;
opacity: .8; /*To adjust tranparency, this only accept values from .1 to 1*/
width: 100%; /*Get full width of container ".separator-container" */
height: 100%; /*Get full height of container ".separator-container" */
}
/*Contact*/
.contact-container {
font-size: 0px;
margin-top: 40px;
}
.contact-container h1 {
font-size: 30px;
text-transform: uppercase;
color: maroon;
letter-spacing: 3px;
}
.contact-container form {
margin-top: 20px;
}
.contact-field {
width: 33.33%; /*Get 1/3 of .main-container*/
display: inline-block;
vertical-align: top;
}
.contact-field input {
width: 90%; /*Get 90% from 1/3 set of its container ".contact-field" */
padding: 10px;
border: 3px solid #ffdead;
color: black;
/*Try to remove this style "outline: none;" and click on the input*/
/*You should see a color blue outline*/
outline: none; /*use this to remove blue outline*/
margin-bottom: 10px;
transition: all .325s;
}
/* ":focus" executes when user clicks on an input*/
.contact-field input:focus {
border: 3px solid #f0b27a;
color: maroon;
}
.contact-field-full {
width: 100%;
}
.contact-field-full input {
float: right; /*Set to right of container ".contact-field-full"*/
margin-right: 12px; /*Adjust to align to the Message input*/
width: 20%; /*Always get 20% of container ".contact-field-full" */
padding: 10px;
margin-bottom: 10px;
outline: none;
border: none;
transition: all .325s;
cursor: pointer; /*To get a hand cursor*/
background-color: #ffdead;
}
.contact-field-full input:hover {
background: #f0b27a;
color: maroon;
}
<!DOCTYPE html>
<html>
<head>
<title>Shawn Mendes </title>
<!-- Call external CSS file -->
<link rel="stylesheet" type="text/css" href="css/blog.css">
<link rel="stylesheet" type="text/css" href="css/style-media-queries.css">
<!-- Meta tag viewport helps browser window to render webpages for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<ul>
<!-- Always put title on anchor tags and don't leave blank hrefs -->
<a href="index.html" title="Home">
<li>Home</li>
</a>
<a href="about.html" title="Music">
<li>Music</li>
</a>
<a href="blog.html" title="Tour">
<li class="active">Tour</li>
</a>
<a href="register.html" title="Video">
<li>Video</li>
</a>
</ul>
</nav>
<section class="banner-container">
</section>
<div class="main-container">
<section class="welcome-container">
<h1>ON TOUR</h1>
</section>
<div class="row">
<div class="column">
<input type="text" name="MAR 7" value="MAR 7">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 8" value="MAR 8">
</div>
<div class="column">
<div class="caption">
<h6>Ziggo Dome</h6>
<h5>NIEUW-AMSTERDAM, NETHERLANDS</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 10" value="MAR 10">
</div>
<div class="column">
<div class="caption">
<h6>ANTWERPS SPORTPALEIS</h6>
<h5>ANTWERP, BELGIUM</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 11" value="MAR 11">
</div>
<div class="column">
<div class="caption">
<h6>MERCEDES-BENZ ARENA</h6>
<h5>BERLIN-FRIEDRICHSHAIN, GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 13" value="MAR 13">
</div>
<div class="column">
<div class="caption">
<h6>OSLO SPEKTRUM ARENA</h6>
<h5>OSLO, NORWAY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 15" value="MAR 15">
</div>
<div class="column">
<div class="caption">
<h6>ERICSSON GLOBE</h6>
<h5>STOCKHOLM, SWEDEN</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 16" value="MAR 16">
</div>
<div class="column">
<div class="caption">
<h6>ROYAL ARENA</h6>
<h5>COPENHAGEN, DENMARK</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<div class="row">
<div class="column">
<input type="text" name="MAR 18" value="MAR 18">
</div>
<div class="column">
<div class="caption">
<h6>LANXESS ARENA</h6>
<h5>KOLN,GERMANY</h5>
</div>
</div>
<div class="column">
<input type="button" name="RSVP" value="RSVP">
<input type="button" name="VIP" value="VIP">
<input type="button" name="TICKETS" value="TICKETS">
</div>
</div>
<section class="separator-container">
<div class="overlay"></div>
</section>
<div class="main-container">
<section class="contact-container">
<h1>Get Updates</h1>
<form method="GET" action="#">
<div class="contact-field">
<input type="text" name="full-name" placeholder="Email Address" required/>
</div>
<div class="contact-field">
<input type="text" name="email-address" placeholder="Postal Code" required/>
</div>
<div class="contact-field">
<input type="text" name="message" placeholder="Country" required/>
</div>
<div class="contact-field-full">
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
<h3>By submitting this form, you agree to our privacy policy </h3>
<h3> Disclaimer: The owner of this website does not own any of its images and contents. Credits to the rigtful owner. </h3>
</section>
</div>
</body>
</html>
Whenever I vertically resize the webpage, the image will not stick within its parent container(banner) and instead overflows once the parent div is smaller than the image dimensions. This can be seen in the code snippet by viewing the borders of both the container and image as you vertically resize. Any way I can have the image shrink once the parent div becomes smaller than the image?
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', Arial, sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner{
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.banner img{
height: auto;
border: 3px solid red;
}
main{
display: flex;
flex: 4;
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
If you wrap the image in a div and then set both the wrapping div and img to height: 100% it should do the trick.
See snippet:
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', Arial, sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner{
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.img-wrap {
height: 100%;
text-align: right;
}
.banner img{
border: 3px solid red;
height: 100%
}
main{
display: flex;
flex: 4;
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<div class="img-wrap">
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
For the image, you can use a max-height in vh. I used 70vh, but you can adjust this to your needs.
For the text size, there is no max-font-size, so I did this using a media query.
/* Styling used for index pages including registration form and reset password pages. */
* {
box-sizing: border-box;
}
body,
html {
font-family: 'Lato', 'Arial', sans-serif;
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
background: #595959;
color: #fff;
display: flex;
flex: 1;
border-bottom: 3px solid #FFD700;
font-size: 2.5em;
}
.banner {
margin: 0 auto;
display: flex;
align-items: center;
border: 3px solid red;
}
.banner img {
height: auto;
border: 3px solid red;
max-height: 70vh; /* adjust image to small screens */
}
main {
display: flex;
flex: 4;
}
#media (max-height: 15rem) { /* adjust font size to small screens */
header {font-size:16.67vh;}
}
<body>
<div class="wrapper">
<header>
<div class="banner">
<h1>Quiz Manager</h1>
<img src="https://via.placeholder.com/115x115" alt="Logo">
</div>
</header>
<main>
<div class="container">
<div class="form-container">
<form action="index.php" method="POST">
<div class="form-row">
<input type="text" name="username" value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" placeholder="Username">
</div>
<div class="form-row">
<input type="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<button type="submit" name="submit">Login</button>
</div>
</form>
</div>
<div class="links">
Forgot Password?
<p id="or">or</p>
<!--If user needs to register an account, they can follow this link.-->
Sign Up
</div>
</div>
</main>
</div>
</body>
I'm having a strange issue, I simply want to vertically and horizontally center my parent div while maintaining a left align child div (text,divs, etc.).
This is what I want:
But when I tried to add a text-align:center to the parent container this is what I got instead:
This is my Fiddle without the text-align:center, I've been working on this for too many days, and no matter what I do I can't keep the text left aligned when they they center, and the child div (numbers) refuse to center. Can someone please show me how to correctly vertically and horizontally center my Parent container while maintaining the left alignment?
Here's my CSS:
.bigwrapper {display:table; height:100vh; width: 100%; }
.listwrapper {background:#fff; vertical-align:middle!important;display:table-cell; }
.point {
padding-bottom: 10px;
padding-top: 10px;
white-space: nowrap;
}
.message {
display: inline-block;
}
.title {
color: black;
white-space: normal;
margin-right: 60px; font-size:19px;
}
.info {
color: #999;
white-space: normal;
margin-right: 60px; margin-top:5px;
}
.number {
font: 36px Arial, sans-serif;
width: 46px;
height: 46px;vertical-align:bottom;
margin-right: 10px; margin-top:5px;
float: left;
text-align: center;
}
.number {
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
background: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
}
.listwrapper p {
font-size: 13px !important; font-weight:bold; color:#333;
}
.listwrapper .form-control {min-width:100%!important; height:35px; font-size:13px; padding-top:0px; padding-bottom:0px; display:inline-block;}
.listwrapper .btn {min-width:100%!important; display:block; height:35px; font-size:12px; margin-top:10px;}
.listwrapper .btn {background:#333 !important; color:#fff !important; font-weight:bold;}
.listwrapper .btn:hover {background:#000 !important; color:#fff !important;}
HTML
<div class="bigwrapper">
<div class="listwrapper">
<div class="point">
<div class="number">1</div>
<div class="message">
<div class="title">Upload your media and get discovered</div>
<div class="info">Share, find, buy, or sell any type of content with the help of filters</div>
</div>
</div>
<div class="point">
<div class="number">2</div>
<div class="message">
<div class="title">Represent your city everytime you post</div>
<div class="info">Raise local awareness with tags linked to content in your area</div>
</div>
</div>
<div class="point">
<div class="number">3</div>
<div class="message">
<div class="title">Make real connections with users nearby</div>
<div class="info">Connect with neighbors, friends, fans, and rising stars in your city</div>
</div>
</div>
<div class="point">
<div class="number">4</div>
<div class="message">
<div class="title">Get started by typing your email address</div>
<div class="guestlist">
<form class="guestlist-form form-inline" action="signup" method="post">
<input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
<input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!">
</form>
<div id="error-message"></div><span class="spam">Don't worry we won't spam</span>
</div>
</div>
</div>
</div>
</div>
You can add display: flex; align-items: center; justify-content: center; to .bigwrapper to center the element that holds all of that content .listwrapper.
align-items: center will vertically center .listwrapper inside of .bigwrapper and justify-content: center; will horizontally align it.
.point {
padding-bottom: 10px;
padding-top: 10px;
white-space: nowrap;
}
.message {
display: inline-block;
}
.title {
color: black;
white-space: normal;
margin-right: 60px;
font-size: 19px;
}
.info {
color: #999;
white-space: normal;
margin-right: 60px;
margin-top: 5px;
}
.number {
font: 36px Arial, sans-serif;
width: 46px;
height: 46px;
vertical-align: bottom;
margin-right: 10px;
margin-top: 5px;
float: left;
text-align: center;
}
.number {
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
background: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
}
.listwrapper p {
font-size: 13px !important;
font-weight: bold;
color: #333;
}
.listwrapper .form-control {
min-width: 100%!important;
height: 35px;
font-size: 13px;
padding-top: 0px;
padding-bottom: 0px;
display: inline-block;
}
.listwrapper .btn {
min-width: 100%!important;
display: block;
height: 35px;
font-size: 12px;
margin-top: 10px;
}
.listwrapper .btn {
background: #333 !important;
color: #fff !important;
font-weight: bold;
}
.listwrapper .btn:hover {
background: #000 !important;
color: #fff !important;
}
.bigwrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
width: 100%;
}
.listwrapper {
background: #fff;
vertical-align: middle!important;
display: table-cell;
}
<body>
<div class="bigwrapper">
<div class="listwrapper">
<div class="point">
<div class="number">1</div>
<div class="message">
<div class="title">Upload your media and get discovered</div>
<div class="info">Share, find, buy, or sell any type of content with the help of filters</div>
</div>
</div>
<div class="point">
<div class="number">2</div>
<div class="message">
<div class="title">Represent your city everytime you post</div>
<div class="info">Raise local awareness with tags linked to content in your area</div>
</div>
</div>
<div class="point">
<div class="number">3</div>
<div class="message">
<div class="title">Make real connections with users nearby</div>
<div class="info">Connect with neighbors, friends, fans, and rising stars in your city</div>
</div>
</div>
<div class="point">
<div class="number">4</div>
<div class="message">
<div class="title">Get started by typing your email address</div>
<div class="guestlist">
<form class="guestlist-form form-inline" action="signup" method="post">
<input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
<input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!">
</form>
<div id="error-message"></div><span class="spam">Don't worry we won't spam</span>
</div>
</div>
</div>
</div>
</div>
</body>
You can set child div-s to be display:inline-block; and then for it parent width:100%;text-align:center;
But to center them vertically You need to use jQuery or redesign Your layout and set left element and right element to be display:inline-block in one container with text-align:center; and then use vertical-align property for left and right element.
Try modifying the css for the "big-wrapper" class to:
.bigwrapper {
position: relative;
top: 50%;
left: 50%;
display: table;
}
Here is my code:
css
*{
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
height: 100%;
}
body {
height: 100%;
min-height: 100%;
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
height: 100%;
}
.container {
width: 100%;
height: 100%;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
position: absolute;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
html
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
I am struggling with my page layout.
I know there are some similar posts, I try but looks like my case is different.
How can my <div id=table> height exclude footer?
If possible, I don't wish to set a number for height.
Thanks.
Just remove position: absolute; from footer.
Edit:
One better solution is remove height and minheight from body, #table and .container and use display:flex.
Give following css to .container
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
* {
margin: 0 auto;
font-family: "Trebuchet MS", Arial, Verdana;
font-size: 12px;
}
html {
}
body {
position: relative;
background-color: #f4f4f4;
}
#table {
display: table;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
#table_cell {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.glyphicon {
position: absolute;
padding: 11px 10px 10px 10px;
pointer-events: none;
}
#username,
#password,
#mail {
position: relative
}
#username-input,
#password-input {
padding-left: 30px;
display: inline-block!important;
width: 270px!important;
height: 37px!important;
}
footer {
height: auto;
width: 100%;
bottom: 0;
text-align: center;
margin: 0 0 0 -15px;
border-top: 1px solid #e7eaec;
background-color: #ffffff;
}
<html>
<head>
</head>
<body>
<div class="container">
<div id="table">
<div id="table_cell">
<form name="login_form" id="login_form" method="post" action="">
<img src="images/this.png" />
<br/>
<div id="username">
<i class="glyphicon glyphicon-user"></i>
<input autofocus type="text" class="form-control" name="base_u_username" id="username-input" placeholder="Username" />
</div>
<br/>
<div id="password">
<i class="glyphicon glyphicon-lock"></i>
<input autocomplete="off" type="password" class="form-control" name="base_u_password" id="password-input" placeholder="Password" />
</div>
<br/>
<span style="float:right;">
<input type="submit" name="login" class="btn btn-default" value="Login" />
</span>
</form>
</div>
</div>
<footer>
footer
<br>footer
</footer>
</div>
</body>
</html>
add this css
#table {
display: table;
height: calc(100% - 31px);
}
Change css for footer
footer {
background-color: #ffffff;
border-top: 1px solid #e7eaec;
bottom: 0;
height: auto;
text-align: center;
width: 100%;
}