How can i center the form called form_login horizontally and vertically in my page ?
Here is the HTML I'm using right now:
<body>
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
</body>
I have tried to do the following css but my form is never centered :
#form_login {
left: 50%;
top: 50%;
margin-left: -25%;
position: absolute;
margin-top: -25%;
}
you can use display:flex to do this : http://codepen.io/anon/pen/yCKuz
html,body {
height:100%;
width:100%;
margin:0;
}
body {
display:flex;
}
form {
margin:auto;/* nice thing of auto margin if display:flex; it center both horizontal and vertical :) */
}
or display:table http://codepen.io/anon/pen/LACnF/
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
form {
display:table;/* shrinks to fit content */
margin:auto;
}
If you want to do a horizontal centering, just put the form inside a DIV tag and apply align="center" attribute to it. So even if the form width is changed, your centering will remain the same.
<div align="center"><form id="form_login"><!--form content here--></form></div>
UPDATE
#G-Cyr is right. align="center" attribute is now obsolete. You can use text-align attribute for this as following.
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.
How to horizontally center a in another ?
Vertical centering is little difficult than that. To do that, you can do the following stuff.
html
<body>
<div id="parent">
<form id="form_login">
<!--form content here-->
</form>
</div>
</body>
Css
#parent {
display: table;
width: 100%;
}
#form_login {
display: table-cell;
text-align: center;
vertical-align: middle;
}
if you use a negative translateX/Y width and height are not necessary and the style is really short
#form_login {
left : 50%;
top : 50%;
position : absolute;
transform : translate(-50%, -50%);
}
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
Alternatively you could use display: grid (check the full page view)
body {
margin : 0;
padding : 0;
display : grid;
place-content : center;
min-height : 100vh;
}
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username" />
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
The accepted answer didn't work with my form, even when I stripped it down to the bare minimum and copied & pasted the code. If anyone else is having this problem, please give my solution a try. Basically, you set Top and Left to 50% as the OP did, but offset the form's container with negative margins on the top and left equal to 50% of the div's height and width, respectively. This moves the center point of the Top and Left coordinates to the center of the form. I will stress that the height and width of the form must be specified (not relative). In this example, a 300x300px form div with margins of -150px on the top and left is perfectly centered no matter the window size:
HTML
<body>
<div class="login_div">
<form class="login_form" action="#">
</form>
</div>
</body>
CSS
.login_div {
position: absolute;
width: 300px;
height: 300px;
/* Center form on page horizontally & vertically */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
.login_form {
width: 300px;
height: 300px;
background: gray;
border-radius: 10px;
margin: 0;
padding: 0;
}
JSFiddle
Now, for those wondering why I used a container for the form, it's because I like to have the option of placing other elements in the form's vicinity and having them centered as well. The form container is completely unnecessary in this example, but would definitely be useful in other cases. Hope this helps!
How about using a grid? it's 2019 and support is reasonable
body {
margin: 0;
padding: 0;
background-color: red;
}
.content {
display: grid;
background-color: bisque;
height: 100vh;
place-items: center;
}
<!DOCTYPE html>
<html>
<body>
<div class="content">
<form action="#" method="POST">
<fieldset>
<legend>Information:</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</fieldset>
<button type="button" formmethod="POST" formaction="#">Submit</button>
</form>
</div>
</body>
</html>
I suggest you using bootstrap which works perfectly:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
html, body, .container-table {
height: 100%;
}
.container-table {
display: table;
}
.vertical-center-row {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page | ... </title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
</head>
<body>
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-4 col-md-offset-4" style="">
<form id="login" action="dashboard.html" method="post">
<div class="username">
<div class="usernameinner">
<input type="text" name="username" id="username" placeholder="Login" />
</div>
</div>
<div class="password">
<div class="passwordinner">
<input type="password" name="password" id="password" placeholder="Mot de passe" />
</div>
</div>
<button id="login-button">Connexion</button>
<div class="keep"><input type="checkbox" /> Gardez moi connecté</div>
</form>
</div>
</div>
</div>
</body>
</html>
#form_login {
height:500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
<form id="form_login">
<p>
<input type="text" id="username" placeholder="username"/>
</p>
<p>
<input type="password" id="password" placeholder="password" />
</p>
<p>
<input type="text" id="server" placeholder="server" />
</p>
<p>
<button id="submitbutton" type="button">Se connecter</button>
</p>
</form>
Related
I just got back into css again and for some reason I can't get this div to margin-right or show background color, right off the bat..
I started off using a div with an id.
#Full {
background-color: red;
margin-right: 300px;
}
HTML:
< div id="Full" >
and then I tried it with a class, ex.
.Full {
background-color: red;
margin-right: 300px;
}
HTML:
< div class="Full" >
and It should be linked, here's the whole thing:
.Full {
background-color: red;
margin-right: 300px;
}
<body>
<div class="Full" >
<br />
<label> Enter Username </label>
<input type="text" name="Username" />
<brk />
<label> Enter Password </label>
<input type="text" name="Password" />
<brk />
<button class="Button1"> Enter</button>
</div>
</body>
Am I forgetting something?
The example you provided is doing exactly as it should.
If you comment out margin-right:300px you will see the .Full div go full width.
The margin-right is pushing the right edge of the .Full box further left.
By having the body tag border turned on you can see that the .Full box stays within the bounds of the body, which tells you that the margin-right attribute is working.
.Full {
background-color: red;
margin-right: 300px;
}
body {
border: solid 1px;
}
<body>
<div class="Full">
<br />
<label> Enter Username </label>
<input type="text" name="Username" />
<brk />
<label> Enter Password </label>
<input type="text" name="Password" />
<brk />
<button class="Button1"> Enter</button>
</div>
</body>
so I am working to create this really simple website, but the problem that I keep facing is that when i put to things inside one div, I cant make them fit the container and when I zoom they keep going vertical, for example:
Here is the html:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
and here is my Css:
.Form{
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding:0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin:0;
float: left;
}
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
Edit: I want it like this: https://i.imgur.com/j27PQq4.jpg, and I want it to stop going down like this: https://i.imgur.com/DPwTwkD.jpg
thanks in advance
As long as your "Not a member?" is inside of its own div, you can use:
width: 100%;
and/or
height: 100%;
I simpley want the div with ID #knop next to the #plusmin when the screen is wide enough. When the screen gets smaller than the #knop has to get under the Plusmin...
I tried al kind of display options in the CSS with no effect...
See page: https://www.tricotstoffen.nl/tricot-stoffen/dierenprint/stenzo-tricot-konijnen-zwart-wit-bio-katoen.html
<div class="product-add-form">
<form action="https://www.tricotstoffen.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cudHJpY290c3RvZmZlbi5ubC90cmljb3Qtc3RvZmZlbi9kaWVyZW5wcmludC9zdGVuem8tdHJpY290LWtvbmlqbmVuLXp3YXJ0LXdpdC1iaW8ta2F0b2VuLmh0bWw,/product/324/" method="post"
id="product_addtocart_form">
<input type="hidden" name="product" value="324" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<input name="form_key" type="hidden" value="xmAH6XJ8Kvrn2FTs" /> <style type="text/css">
#box{
width: 100%;
min-height: 55px;
display: inline-table;
}
#plusmin{
width: 210px;
height: 55px;
float: left;
padding-left: 3px;
margin-bottom:10px;
}
#knop{
height: 55px;
width: 175px;
float: left;
}
</style>
<div class="box-tocart" id="box">
<div class="fieldset">
<div class="field qty" id="plusmin">
<label class="label" for="qty"><span>Aantal</span></label>
<div class="control" data-bind="scope: 'qty_change'">
<button data-bind="click: decreaseQty">-</button>
<input data-bind="value: qty()"
type="number"
name="qty"
id="qty"
maxlength="12"
title="Aantal" class="input-text qty"
data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":0.5}}"
/>
<button data-bind="click: increaseQty">+</button>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"qty_change": {
"component": "Jilco_plusminknoppen/js/view/product/view/qty_change",
"defaultQty": 0.5 }
}
}
}
}
</script>
</div>
<div class="actions" id="knop">
<button type="submit"
title="In Winkelwagen"
class="action primary tocart"
id="product-addtocart-button">
<span>In winkelwagen</span>
</button>
</div>
</div>
</div>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"Magento_Catalog/product/view/validation": {
"radioCheckboxClosest": ".nested"
}
}
}
</script>
</form>
</div>
div#plusmin on the example page you provided has an inline style attribute, which was probably set by some magento javascript. You can see it in your browsers development console:
<div class="field qty" id="plusmin" style="width: 100%; display: block;">
...
</div>
This is screwing you over because inline style attribute rules take precedence over css style rules. As a quick fix you could append the css rule that sets the div's width with !important. Such rules cannot be overridden by style attribute rules.
#plusmin{
width: 210px !important;
...
}
Have a look here, you need to use #media queries to adjust your css when the screen is x pixels wide.
As as example:
#media screen and (max-width: 400px) {
#knop {
width: 100%;
}
#plusmin {
width: 100%;
}
}
I have a login form that is on the center of the page. The FORM is already in the right place with the right size. However, the two inputs are aligned to the left and I want them to be centered. The following code does not work. Any ideas?
HTML
<div class="col-sm-4 col-sm-offset-4">
<form action="/new" method="POST">
<input class="loginField" type="text" name="email" placeholder="Email address"></input>
<input class="loginField" type="text" name="password" placeholder="Password"></input>
</form>
</div>
CSS
.loginField {
margin: 0 auto;
width: 500px;
height: 50px;
}
You should use the form-control class to alter the default behavior of Bootstrap inputs.
*I altered your HTML so it's mobile first, this wont effect the text being centered if it's unnecessary for your needs tho.
body {
padding-top: 50px;
}
#loginForm {
max-width: 500px;
margin: 0 auto;
}
#loginForm .form-control {
position: relative;
height: 50px;
font-size: 16px;
text-align: center;
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="loginForm">
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
</form>
</div>
<!-- /container -->
<hr>
Add a class="text-center" to your form
<form class="text-center" action="/new" method="POST">
jsBin demo
Logically, if you don't want all your form's text to be centered, wrap your inputs inside a i.e: <div> and add the class to that DIV instead.
I have two queries as stated below:-
1) I want to move the blue colored rectangular box (containing username and password text fields) to the center of the page. I tried using   to change the location of the rectangular box but strange, it is not moving at all.Is there any parameter in HTML which can help me shift this box to the center of the page? Can anyone suggest me how can I achieve this?
2) The BORDER = 8 parameter is not working as here I want to set a dark black colored border around my rectangular box. Can anyone suggest what can be the cause of this issue?
To replicate the issue which I am facing, copy the below codes in a .TXT file and save it as .HTML file. Open in IE or Firefox browser to see the issue which I am getting.
Code:
<html>
<form id="login" action="index.html">
<div style="width: 450px; height: 250px; background: blue;BORDER=8"><br/><br/><br/>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br/> <br/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/> <br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form"/>  
</div><br/><br/>
</form>
</html>
if you only want to center horizontally try with: margin:0 auto;
http://jsfiddle.net/P2rQK/
<div style="width: 450px; height: 250px; background: blue;margin:0 auto;">
<form id="login" action="index.html">
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18" />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
It is bad to use to position elements. also <br /> is not a "clean" way.
If you want truly dynamic positioning, use the below which is not reliant on specifying dimensions. Critically it uses a CSS tabulated layout to do the position calculations. The border can be achieved by giving your form a border:8px solid black;
You should also move your styles out from being specified inline- and use CSS to control your layout instead of reliance on so much HTML (such as ).
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>
<form id="login" action="index.html">
<label>Username:</label>
<input type="text" name="userid" size="18" maxlength="18" />
<br />
<label>Password :</label>
<input type="password" name="pswrd" size="18" maxlength="18" />
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
label {
font-weight:bold;
margin-right:10px;
}
.table {
display:table;
text-align:center;
width:100%;
height:100%;
table-layout:fixed;
}
.cell {
display:table-cell;
vertical-align:middle;
}
form {
display:inline-block;
border:8px solid black;
width: 450px;
padding:50px 0;
background: blue;
}
input {
margin-bottom:15px;
}
although this is not a js-question:
<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>
position absolute, left 50% and margin-left: -225px (half width) will position the box in the middle of the screen.
border: 8px solid black is the right way to define a border of 8px width
You will need to add margin: 0 auto; to your blue box.
Look at this Demo
<div style="border-width:8px;border-color:red;border-style:solid;width:450px;height:1050px;background-color:gold;"> content </div>
I would advise using a lot more CSS and less use of the and <br>.
` <html>
<style>
#login {
left: 50%;
width: 200px;
margin-left: -225px;
position: relative;
}
div {
width: 450px;
height: 250px;
background: blue;
border:8px solid #000;
padding:20px;
}
</style>
<form id="login" action="index.html">
<div>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/><br>
<input type="submit" value="Submit"><br>
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</div>
</form>
</html>`
Try playing around with margins to get the positioning correct.