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.
Related
I am aiming to make text boxes that adapt to the size of the browser window. I'm using css flex properties. The textboxes in the code below do not adapt with the screen size, and I'm not sure exactly why. I believe it might be because I have an outer div that's interacting with the css properties for the actual textboxes.
One other thing that I'm not sure how to do, is to align the button to the right edge of the text boxes, so that the button does not go past the textboxes. Because the textboxes are not dynamically reshaping their width I'm not sure how to proceed with the button.
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
/*background-color: darkblue;*/
}
input {
justify-content: flex-left;
padding: 5px;
position: absolute;
margin-left: 200px;
}
.txt_box {
display: flex;
width: 80%;
}
.search_section {
/*padding: 5px;*/
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
flex-direction: row;
align-items: left;
justify-content: left;
padding-top: 10px;
padding-bottom: 10px;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<!-- <div id="wrapper" -->
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>
You need to remove position: absolute from input to make it flex-item. Since you have made absolute positioned then it comes out of the normal flow, then you don't need to use display: flex on input.
No need to use the below style, since txt_box will be a flex item then it will adjust its width accordingly
.txt_box { // Not Required
display: flex;
width: 80%;
}
There is no such property justify-content: flex-left;. There is justify-content: flex-start; instead
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
}
input {
padding: 5px;
}
.search_section {
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
}
.left_label {
flex-basis: 20%;
}
.txt_box {
margin: 0;
flex-basis: 80%;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>
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;
}
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%;
}
I'm trying to float 2 divs next to each other and I want the right div to give a margin in relation to it's parent while the left div is shown in front of the margin of the right div.
I have this code below with some labels and input fields. I gave the inputwrapper a margin-left of 220px to align the inputfields vertically but they don't.
So my quetion is how to get these inputfields vertically aligned without using a table?
Thanks in advance
Code snippet:
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Use position: absolute; for labelwrapper class.
* {
box-sizing: border-box;
}
html, body {
margin: 0px;
padding: 0px;
font-family: Geneva, sans-serif;
font-size: 13pt;
}
.registerwrapper {
border: 1px black solid;
height: auto !important;
width: 600px;
display: block;
padding: 10px;
margin: 50px auto;
}
.labelwrapper {
position: absolute;
border: 1px red solid;
float: left;
display: block;
z-index: 100;
}
.inputwrapper {
border: 1px blue solid;
margin-left: 220px;
float: left;
display: block;
z-index: 1;
}
.row {
border: blueviolet 1px solid;
position: relative;
padding: 3px;
width: auto!important;
display: block;
overflow: auto;
}
.row:after {
content: "";
clear: both;
display: block;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/layout_register.css" />
</head>
<body>
</body>
<div class="registerwrapper">
<form action="" method="post">
<div class="row">
<div class="labelwrapper"><label for="username">Username:</label></div>
<div class="inputwrapper"><input type="text" name="username" id="username" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password">Choose a password:</label></div>
<div class="inputwrapper"><input type="password" name="password" id="password" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="password_again">Enter your password again:</label></div>
<div class="inputwrapper"><input type="password" name="password_again" id="password_again" /></div>
</div>
<div class="row">
<div class="labelwrapper"><label for="name">Name:</label></div>
<div class="inputwrapper"><input type="text" name="name" id="name" value="" autocomplete="off" /></div>
</div>
<div class="row">
<div class="inputwrapper"><input type="submit" value="Register" /></div>
</div>
</form>
</div>
</body>
</html>
Just change the following classes in your css file
.labelwrapper {
border: 1px red solid;
float: left;
}
.inputwrapper {
border: 1px blue solid;
float: right;
margin-right:100px;
}
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;
}
}
...