I need to center a survey form in my website, but when I try it, it doesn't work. I don't know what's wrong. Can somebody help me?
Here is my Pen. And here's my CSS code:
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
color: var(--color-white);
margin: 0;
}
/* mobile friendly alternative to using background-attachment: fixed */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--color-darkblue);
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)
),
url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container {
width: 100%;
margin: 3.125rem auto 0 auto;
}
you can use this on your body
body {
background-color: lightblue;
font-family: Helvetica;
font-size: 16px;
flex: 0 1 auto;
align-self: auto;
width: 100%;
text-align: center;
}
It is not recommended to use body directly and style it. But I made a few tweaks on your code to keep letting you use body directly.
Please check this out for reference when you want to center an element.
https://css-tricks.com/centering-css-complete-guide/
*,
*::before,
*::after {
box-sizing: border-box;
}
.wrapper {
margin: 0 auto; // this centers bloc elements
text-align: center; // This centers inline elements
}
header {
width: 100%;
}
body {
width: 100%; // just let your body take 100% of the page
background-color: lightblue;
font-family: Helvetica;
font-size: 16px;
position: absolute;
flex: 0 1 auto;
align-self: auto;
}
#survey-form {
border: solid 2px;
border-radius: 1%;
padding: 20px;
margin-top: 30px;
background-color: lightpink;
position: relative;
}
.form input {
width: 100%;
height: 30px;
}
.container {
display: flex;
justify-content: flex-start;
flex-direction: column;
//border: solid 2px #fff;
max-width: 700px;
margin: auto;
}
h1 {
color: darkblue;
}
p {
font-weight: bold;
}
form {
text-align: left;
}
#dropdown {
width: 100%;
height: 30px;
}
.checkbox {
display: flex;
flex-direction: column;
}
#submit {
height: 20px;
width: 100%;
background-color: #bbh77f;
color: #000;
padding: 0 20px;
text-align: center;
vertical-align: middle;
}
.input-textarea {
min-height: 120px;
width: 100%;
margin-bottom: 15px;
resize: vertical;
}
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Formularz</title>
</head>
<body>
<header>
<div class='wrapper'>
<h1 id="title">Formularz freeCodeCamp.org</h1>
<p id="description">Dziękujemy za poświęcony czas i ulepszanie naszej platformy</p>
</div>
</header>
<div class="container">
<form id="survey-form">
<div class="form box">
<div>
<label id="name-label" for="name"><p>Imię</p></label>
<input id="name" type="text" required placeholder="Wpisz swoje imię" />
</div>
<div>
<label id="email-label" for="mail"><p>E-mail</p></label>
<input id="name" type="email" required placeholder="Wpisz swój e-mail" />
</div>
<div>
<label id="number-label" for="number"><p>Wiek</p></label>
<input type="number" min="10" max="99" placeholder="10">
</div>
</div>
<div class="form-group">
<p id="dropdown-label">Która opcja najlepiej Cię opisuje?</p>
<select id="dropdown">
<option disabled selected value>Wybierz swoją rolę</option>
<option value="student">Student</option>
<option value="full-time-job">Pełen etat</option>
<option value="full-time-learner">Uczeń</option>
<option value="prefer-not-to-say">Nie chcę mówić</option>
<option value="other">Inne</option>
</select>
</div>
<div class="form-radio">
<p id="radio-label">Czy poleciłbyś freeCodeCamp znajomemu?</p>
<div>
<input type="radio" id="tak" name="polecenie" value="tak" checked>
<label for="tak">Tak</label>
</div>
<div>
<input type="radio" id="nie" name="polecenie" value="nie">
<label for="nie">Nie</label>
</div>
<div>
<input type="radio" id="nie-wiem" name="polecenie" value="nie-wiem">
<label for="nie-wiem">Nie wiem</label>
</div>
</div>
<div class="form-group">
<p id="dropdown-label">Jaka część freeCodeCamp jest Twoją ulubioną?</p>
<select id="dropdown">
<option disabled selected value>Wybierz opcję</option>
<option value="challenges">Challenges</option>
<option value="projects">Projects</option>
<option value="community">Community</option>
<option value="open-source">Open source</option>
</select>
</div>
<div class="form-group checkbox">
<p>Co chcesz ulepszyć?</p>
<div>
<input type="checkbox">
<label>Front-end Projects</label>
</div>
<div>
<input type="checkbox">
<label>Back-end Projects</label>
</div>
<div>
<input type="checkbox" checked>
<label>Data Visualization</label>
</div>
<div>
<input type="checkbox">
<label>Challenges</label>
</div>
<div>
<input type="checkbox">
<label>Open Source Community</label>
</div>
<div>
<input type="checkbox">
<label>Gitter help rooms</label>
</div>
<div>
<input type="checkbox">
<label>Videos</label></div>
<div>
<input type="checkbox">
<label>City Meetups</label></div>
<div>
<input type="checkbox">
<label>Wiki</label>
</div>
<div>
<input type="checkbox">
<label>Forum</label>
</div>
<div>
<input type="checkbox">
<label>Additional Courses</label>
</div>
</div>
<div class="form-group">
<p>Masz sugestie lub podpowiedzi? </p>
<div class="textarea container input-textarea">
<textarea rows="8" placeholder="Wprowadź swoją opinię tutaj"></textarea>
</div>
<button id="submit">Wyślij</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Related
I am having troubles with centering and aligning the forms inside the divs
I can't get the green to size properly and centre the form inside the green.
BTW the pic is what it looks like on my computer, when you click the code snippet, it looks all jumbled.
<style type="text/css">
#div1 {
background-color: coral;
width: 33.33%;
float: right;
height: 200px;
text-align: center;
}
#div1_Child {
width: 100%;
height: 60%;
border: 0px solid blue;
margin: 0 auto;
text-align: center;
}
#div2 {
background-color: rgb(240, 191, 191);
width: 33.33%;
float: left;
height: 200px;
text-align: center;
}
#div2_Child {
width: 90%;
height: 60%;
border: 0px solid blue;
margin: 0 auto;
text-align: left;
}
#div3 {
background-color: aqua;
width: 33.33%;
margin: 0 auto;
height: 200px;
text-align: center;
}
#div3_Child {
width: 85%;
height: 60%;
border: 0px solid blue;
margin: 0 auto;
text-align: center;
padding: 5px;
}
label {
width: 200px;
display: inline-block;
text-align: right;
}
form {
border-radius: 10px;
background: green;
color: black;
width: 80%;
padding: 2px;
margin: 0 auto;
}
</style>
<div id="div1">Div1 Right
<h1>Lighter Load</h1>
<div id="div1_Child">
<form>
<label for="beams">Beam Thickness</label>
<select name="Beams" id="beam">
<option value="Select">Select</option>
<option value="3.5">3.5</option>
<option value="5.25">5.25</option>
<option value="7">7</option>
</select><br>
<label for="dead">Dead</label>
<input id="dead2" type="text" name="dead" onkeyup="ecCalc()"><br>
<label>Eccentric</label>
<input id="eccCalc" type="text" name="total"><br>
<label>Index</label>
<input type="text" id="ecc">
</form>
</div>
</div>
<div id="div2">Div2 Left
<h1>Post Height</h1>
<div id="div2_Child">
<form class="form">
<label for="column_Height">Column Height:</label>
<select id="column_Height" onchange="search1()";>
<option value="">Select</option>
<option value="90">89</option>
<option value="96">90</option>
<option value="102">96</option>
<option value="120">102</option>
<option value="144">120</option>
<option value="168">144</option>
<option value="192">168</option>
<option value="216">192</option>
<option value="216">216</option>
</select> <br>
<label for="value">Between</label>
<input type="text" id="value" size="4" disabled>
<label for="text">and</label>
<input type="text" id="text" size="4" disabled><br>
<label for="l_oad" class= "label1">Unfactored</label>
<input type="text" id="l_oad" onkeyup="search()" placeholder="Unfactored.." title="Load" size="15">
</form>
</div>
</div>
<div id="div3">Div3 Middle
<h1>Heaver Loads</h1>
<div id="div3_Child">
<form>
<label>Dead</label>
<input id="dead1" type="text" name="dead" onkeyup="total_1()" size="10px"><br>
<label>Live</label>
<input class="input1" id="live1" type="text" name="live" onkeyup="total_1()" size="10"><br>
<label>Total</label>
<input id="total1" type="text" name="total" size="10"><br>
</form>
</div>
</div>
Why won't you use flex box? For more info about flex box look here: link. For all row divs you can still use flexbox example flex-direction: row;. Width of items inside will corresponds to your screen width.
* { box-sizing: border-box; margin: auto; padding: auto; }
.container_main { width: auto; height: 400px; background: red; padding: 10px; display: flex; flex-direction: row; overflow: auto; }
.container_main .item { width: 100%; height: 100%; background: yellow; margin: 0 5px; padding: 5px }
.container_main form { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.container_main form .form_item { width: 100%; height: 32px; display: flex; flex-direction: row; align-items: center; justify-content: center; }
<div class="container_main">
<div class="item">
<form method="post">
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
</form>
</div>
<div class="item">
<form method="post">
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
</form>
</div>
<div class="item">
<form method="post">
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
<div class="form_item">
<span>something</span>
<input type="text"/>
</div>
</form>
</div>
</div>
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.
Problem is that the footer's text is left aligned on this page but not on any others using identical code. I went step by step commenting out each section and it is the map img that is causing this issue. I can solve this by setting the footer to clear right but that seems to completely mess up the height of the footer. I have included a couple of screen prints to help demonstrate what I mean.
#container {
background-image: url(..//Images/backgroundPic.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
width: 1000px;
border-style: ridge;
border-width: 5px;
}
h1,
h2 {
text-decoration: underline;
}
p {
font-weight: bold;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
background-color: #F1EBEB;
}
/* Header */
#top {
padding: 0px;
margin: 0px;
background-color: white;
background-image: url(../images/tutorteam.png);
height: 50px;
width: 1000px;
font-size: 1em;
}
#top img {
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-right: 5px;
}
#details {
display: table;
padding: 10px;
}
#details p {
display: table-cell;
vertical-align: top;
padding: 3px;
}
div.tablerow {
display: table-row
}
div.tablerow p:first-child {
text-align: right;
}
#logo {
float: right;
margin-left: 4px;
margin-top: 2px;
}
#back {
float: left;
margin-left: 40px;
margin-top: 2px;
}
#main {
padding: 10px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: white;
}
#tableContainer {
display: table;
margin-left: auto;
margin-right: auto;
border-spacing: 10px;
font-size: 0.25em;
}
#footer {
display: table-row;
}
#tableCell {
display: table-cell;
vertical-align: top;
}
#dubaiMap {
float: right;
position: relative;
right: 20px;
top: -200px;
}
#signUp {
margin-left: 110px;
margin-bottom: 100px;
border: 0px;
padding: 0px;
height: 90px;
}
#submit {
float: right;
position: relative;
bottom: 60px;
left: 420px;
margin-left: 20px;
background-color: #4CAF50;
/* Green */
border: 2px solid black;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
textarea {
float: right;
position: relative;
bottom: 250px;
right: 175px;
border: 3px solid #4CAF50;
font-size: 14px
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up</title>
<link type="text/css" rel="stylesheet" href="login.css">
</head>
<body>
<div id="container">
<section id="top">
<a href="../index.html">
<img id="back" src="../images/back.png" height="40px">
</a>
<img id="logo" src="../images/tutorTeamLogo.png" height="40px">
</section>
<section id="main">
<p>Are you a tutor or customer? please select the relevant option.</p>
<form>
<select name="user">
<option value="Customer">Customer</option>
<option value="Tutor">Tutor</option>
</select>
</form>
<form action="tutorSignUp.php" method="POST">
<p>Please complete to sign up.</p>
<section id="details">
<div class="tablerow">
<p>First name:</p>
<p>
<input type="text" name="firstName" value="">
</p>
</div>
<div class="tablerow">
<p>Last name:</p>
<p>
<input type="text" name="lastName" value="">
</p>
</div>
<div class="tablerow">
<p>Address:</p>
<p>
<input type="text" name="address" value="">
</p>
</div>
<div class="tablerow">
<p>city:</p>
<p>
<input type="text" name="city" value="">
</p>
</div>
<div class="tablerow">
<p>Zip:</p>
<p>
<input type="text" name="zip" value="">
</p>
</div>
<div class="tablerow">
<p>Telephone:</p>
<p>
<input type="tel" name="telephone" value="">
</p>
</div>
</section>
<img src="../Images/dubaiZones.png" id="dubaiMap">
<p>Tutoring level</p>
<select name="level">
<option value="Pre School">Pre School</option>
<option value="Primary School">Primary</option>
<option value="GCSE">GCSE</option>
<option value="A level">A Level</option>
<option value="Undergraduate">Undergraduate</option>
<option value="Post Graduate">Post Graduate</option>
</select>
<p>Subject specialism(s)</p>
<input type="checkbox" name="subject" value="English">English
<br>
<input type="checkbox" name="subject" value="Maths">Maths
<br>
<input type="checkbox" name="subject" value="Physics">Physics
<br>
<input type="checkbox" name="subject" value="Chemistry">Chemistry
<br>
<input type="checkbox" name="subject" value="Biology">Biology
<br>
<input type="checkbox" name="subject" value="History">History
<br>
<input type="checkbox" name="subject" value="Geography">Geography
<br>
<input type="checkbox" name="subject" value="Religious Studies">R.E.
<br>
<input type="checkbox" name="subject" value="French">French
<br>
<input type="checkbox" name="subject" value="German">German
<br>
<input type="checkbox" name="subject" value="Spanish">Spanish
<br>
<input type="checkbox" name="subject" value="Computing">Computing
<br>
<input type="checkbox" name="subject" value="Business">Business
<br>
<input type="checkbox" name="subject" value="Economics">Economics
<br>
<input type="checkbox" name="subject" value="Classics">Classics
<br>
<br>
<textarea id="textArea" name="comments" rows="10" cols="48">Additional Information...</textarea>
<input type="submit" value="Sign Up" id="submit">
</form>
</section>
<footer>
<table id="tableContainer">
<tr id="footer">
<td id="tableCell">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</td>
</tr>
</table>
</footer>
</div>
</body>
</html>
I don't undestand the need of using a table to display a single line of text.
You juste need to use a paragraph with text-align: center;
.text-center {
text-align: center;
}
<footer id="footer">
<p class="text-center">Website design and coding provided by Technology in Learning 2016 Copyright Technology in Learning
<img id="til" src="../Images/company.png" height="12" width="12">
</p>
</footer>
Plus I think your issue is du to the use of the table. I believe by default table cell align text on the left, and I didn't see any CSS rule to change that in your code.
Good day developers! I would like to ask if how can I make my form appear on top of my image? The problem is that my form appear at the bottom. Here's the image of my screenshot.
Here are my codes:
HTML
<body>
<div class="container" align="center">
<div id="image">
<img src="assets/img/imac.png" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me"> Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
}
#loginForm{
width: 500px;
height: 400px;
}
Make the #image be position:absolute and fill the .container (which is made position:relative) with it.
body {
background-color: #2ecc71;
}
.container {
width: 1000px;
height: 700px;
margin-top: 100px;
position:relative;
}
#loginForm {
width: 500px;
height: 400px;
position:relative;
z-index:10;
}
#image{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
<div class="container" align="center">
<div id="image">
<img src="http://dummyimage.com/600x678/cccccc/ffffff.jpg&text=monitor+image" style="width:640px; height:678">
</div>
<div id="loginForm">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Please sign in</h3>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="E-mail" name="email" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
<div class="checkbox">
<label>
<input name="remember" type="checkbox" value="Remember Me">Remember Me
</label>
</div>
<input class="btn btn-lg btn-success btn-block" type="submit" value="Login">
</fieldset>
</form>
</div>
</div>
</div>
</div>
Create a div the size of the image, and make the image the background image for the div.
Then place a div container inside this div for the form itself. You can then use CSS to position the form div using margins.
<div id="image-container">
<div id="form-container">
// your form
</div>
</div>
#image-container {
width: 500px;
height: 500px;
background: url(/* your image */);
}
#form-container {
width:350px;
margin: 30px auto 0 auto;
}
Obviously, you need to replace the sizes with ones of your actual image, and the margin values to make your form content fit within the screen of the computer in your image.
That should work, I'm coding this on my phone so apologies if I miss something trivial!
I used the last example and made it simpler. Just adjust for image size and use padding to position the form.
<div style="width:529px; height:220px; background-image:url('image.jpg')" align="center">
<div style="width:529px; padding: 165 0 0 0" align="center">
...form ...
<div>
<div>
Try this
* {
box-sizing: border-box;
font-family: sans-serif;
}
.form-container {
display: flex;
justify-content: center;
background: url("https://parrot-tutorial.com/images/mask-smog.jpg") no-repeat center;
background-size: cover;
position: relative;
min-height: 400px;
padding: 24px;
}
.my-form {
background-color: #fff;
padding: 16px;
}
.form-header {
text-align: center;
padding: 0;
margin-top: 0;
font-size: 2em;
}
.form-group {
margin-bottom: 1rem;
}
label {
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #f1f1f1;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.form-text {
color: #6c757d;
display: block;
margin-top: .25rem;
font-size: 80%;
font-weight: 400;
}
.btn {
display: block;
width: 100%;
font-weight: 400;
color: #ffffff;
cursor: pointer;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
background-color: #007bff;
}
<div class="form-container">
<form action="/html/form-action.php" class="my-form" method="POST">
<h2 class="form-header">Login</h2>
<div class="form-group">
<label for="exampleEmail">Email address</label>
<input type="email" class="form-control" id="exampleEmail" placeholder="Enter email" name="uemail">
<small class="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="examplePassword">Password</label>
<input type="password" class="form-control" id="examplePassword" placeholder="Password" name="pwd">
</div>
<div class="form-group">
<input type="checkbox" id="exampleCheck" name="saveinfo">
<label for="exampleCheck">Remember me</label>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
Reference:Add a Form on Image
I am trying to center the text and form field inputs in the #registration-code-entry .registration-code-entry-content div
Not sure what I am doing wrong.
http://jsfiddle.net/yLX4F/
<div id="registration-code-entry">
<div class="registration-code-entry-header"></div>
<div class="registration-code-entry-middle">
<div class="registration-code-entry-content">
<form class="registration-form">
<div class="field">
<input type="text" name="first_name" placeholder="*First Name" class="required" />
</div>
<div class="field">
<input type="text" name="last_name" placeholder="*Last Name" class="required" />
</div>
<div class="field">
<input type="email" name="email" placeholder="*Email Address" class="required" />
</div>
<div class="field">
<input type="text" name="phone" placeholder="Phone Number" />
</div>
<div class="field">
<input type="checkbox" name="optin">
<label for="optin" />Yes, I would like to receive more information</label>
</div>
<div class="field">
<input type="checkbox" name="accept" class="required" />
<label for="accept">*I accept the Official Rules.</label>
</div>
<input type="submit" class="submit-btn" value="">
</form>
</div>
</div>
<div class="registration-code-entry-footer"></div>
</div>
css
#registration-code-entry {
height: 100px;
width: 359px;
position: absolute;
top: 100px;
right: 20px;
background: transparent;
.registration-code-entry-header {
top: 0;
background: transparent url('../images/form-header.png') no-repeat;
width: 359px;
height: 17px;
}
.registration-code-entry-middle {
background: #713487;
.registration-code-entry-content {
border: 1px solid red;
width: 350px;
margin: 0 auto;
color: #fff;
form {
display: inline-block;
margin: 0 auto;
.field {
margin: 10px 0;
input[type="email"], input[type="text"] {
padding: 5px;
}
}
input.submit-btn {
background: transparent url('../images/submit-btn.png') no-repeat;
width: 168px;
height: 59px;
display: block;
border: 0;
}
}
}
}
.registration-code-entry-footer {
display: block;
bottom: 0;
background: transparent url('../images/form-footer.png') no-repeat;
width: 359px;
height: 11px;
}
}
You can add text-align: centerto .field. You can also change to display: block for form to make the form expand to the full width of the parent.
jsfiddle
Centering the input ?
This will centering it :
.field input[type="text"], .field input[type="email"] {
display:block;
margin: auto;
}
Check This
Just change youre less :
...
.field {
margin: 10px 0;
input[type="email"], input[type="text"] {
padding: 5px;
display:block;
margin:0 auto;
}
}
...