I have tried everything. I cannot get this centered on the screen. I am using ie 9 but it does the same in chrome. It just sits on the left of the webpage. Thank you for any help.
<style type="text/css">
body {
margin:50px 0px; padding:0px;
text-align:center;
align:center;
}
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
</style>
</head>
<body>
<form name="Form1" action="mypage.asp" method="get">
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
<input type="submit" name="submit" id="submit" value="submit" class="button" />
</form>
</body>
Another way
body {
text-align: center;
}
form {
display: inline-block;
}
<body>
<form>
<input type="text" value="abc">
</form>
</body>
Wrap your form in a div.
Set the div's display to block and text-align to center (this will center the contained form).
Set the form's display to inline-block (auto-sizes to content), left and right margins to auto (centers it horizontally), and text-align to left (or else its children will be center-aligned too).
HTML:
<div class="form">
<form name="Form1" action="mypage.asp" method="get">
...
</form>
</div>
CSS:
div.form
{
display: block;
text-align: center;
}
form
{
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body { text-align: center; }
/* center all items within body, this property is inherited */
body > * { text-align: left; }
/* left-align the CONTENTS all items within body, additionally
you can add this text-align: left property to all elements
manually */
form { display: inline-block; }
/* reduces the width of the form to only what is necessary */
http://jsfiddle.net/sqdBr/4/
Works & tested in Chrome/IE/FF
You can try
form {
margin-left: 25%;
margin-right:25%;
width: 50%;
}
Or
form {
margin-left: 15%;
margin-right:15%;
width: 70%;
}
Try adding this to your css
.form { width:985px; margin:0 auto }
and add width:100% to the body tag
Then put:
<div class="form">
before the tag.
You can try this code for your 'body' tag, change it as you like..
body {
display: flex;
justify-content: center;
margin-top: 5%;
align-items: center;
}
i dont know if the full resolution has been made for this yet. i know that from doing a 2 column page with fixed left side bar, to get a contact us form centered on my page i put the following:
form {
width: 100%;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
this worked for me so thought id throw in my resolution to the same problem
This best solution I found online is using absolute positioning.
.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-49%, -49%);
}
You can use the following CSS to center the form (note that it is important to set the width to something that isn´t 'auto' for this to work):
form {
margin-left:auto;
margin-right:auto;
width:100px;
}
I css I got no idea
but I made that just by centering the form in html
something like this:
in css:
form.principal {width:12em;}
form.principal label { float:left; display:block; clear:both; padding:3px;}
form.principal input { float:left; width:8em;}
form.principal button{clear:both; width:130px; height:50px; margin-top:8px;}
then in html:
<center><form class="principal" method="POST">
<fieldset>
<p><label for="username">User</label><input id="username" type="text" name="username" />
<p><label for="password">Password</label><input id="password" type="password" name="password" /></p>
<button>Log in</button>
</fieldset>
</form></center>
This will center the form, and the content will be in the left of the centered form.
Normally, if you look up any software issue on stackoverflow, you quickly find a clear answer. But in CSS, even something as simple as "center a form" leads to a long discussion, and lots of failed solutions.
Correction: orfdorf's solution (above) works.
body {
text-align: center;
}
form {
width:90%;
background-color: #c0d7f8;
}
<body>
<form>
<input type="text" value="abc">
</form>
</body>
<!DOCTYPE html>
<html>
<head>
<title>Private</title>
<!-- local links -->
<style>
body{
background-color:#6e6969;
text-align:center;
}
body .form_wrapper{
display:inline-block;
background-color: #fff;
border-radius: 5px;
height: auto;
padding: 15px 18px;
margin: 10% auto;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class = "form_wrapper">
<form method="post" action="function.php">
<h1 class = "formHeading">Admin login form</h1>
<input type = "text" name = "username" id = "username"placeholder = "Enter Username" required = "required">
<input type = "password" name = "password" id = "password" placeholder = "Enter password" required = "required">
<button type = "submit" >Login</button>
froget password!
<span>?</span>help
</form>
</div>
</body>
</html>
Another solution (without a wrapper) would be to set the form to display: table, which would make it act like a table so it would have the width of its largest child, and then apply margin: 0 auto to center it.
form {
display: table;
margin: 0 auto;
}
Credit goes to: https://stackoverflow.com/a/49378738/7841955
I had the same problem (i use google)
What i did is i added the align attribute to the form
<form align="center">
<!--Stuff-->
</form>
That is one solution
Related
Here is my scenario:
This page will be translated into different languages.
I want the input type box width should be auto scaled as per translated "search" text without changing CSS / structure.
You need a way for your box model to adapt automatically. Using CSS table layout may serve your purpose.
HTML
<div class="input-row">
<label for="myInput">Search</label>
<input id="myInput" type="text" placeholder="text input"/>
</div>
CSS
.input-row {
display: table;
width: 100%;
}
.input-row label {
display: table-cell;
width:1%;
white-space:nowrap;
}
.input-row input {
display: table-cell;
width:100%;
}
https://jsfiddle.net/836c154c/
Please check
<div class="container">
<div class="right">ASaasasasAaA</div>
<div class="left"><input type="text" style="width:100%"></div>
</div>
css
.container {
height:200px;
border:1px solid;
}
.left {
width:auto;
background:red;
overflow:hidden;
}
.right {
background:blue;
float:left;
}
demo
Here is how you can align items with a new way, with help of flexbox:
HTML:
div {
display: flex;
}
CSS:
label { white-space: nowrap; }
input { width: 100%; }
Demo http://jsfiddle.net/infous/710nz58m/
http://autoprefixer.github.io/ to get browser prefixes
In the example below:
I want the textbox to fill all available space. The problem is the dropdown width cannot be fixed, since its elements are not static. I would like to solve this with just css (no javascript if possible).
I have tried the solutions proposed to similar questions without any luck :(
Here is the fiddle: http://jsfiddle.net/ruben_diaz/cAHb8/
Here is the html:
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">General</option>
<option value="2">Fruits</option>
<option value="3">Ice Creams</option>
<option value="4">Candy</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
And here the css:
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-block;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
Updated demo (tested fine in IE7/8/9/10, Firefox, Chrome, Safari)
Float the left and right elements.
In the HTML source code, put both of the floated elements first (this is the most important part).
Give the middle element overflow: hidden; and an implict width of 100%.
Give the text box in the middle element a width of 100%.
.category_dropdown_container {
float: left;
}
input[type="submit"] {
float: right;
...
}
.resizable_text_box {
padding: 0 15px 0 10px;
overflow: hidden;
}
.resizable_text_box input {
width: 100%;
}
<div class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
...
</select>
</div>
<input name="commit" type="submit" value="Ask!" />
<div class="resizable_text_box">
<input id="question_text_box" name="question[what]"
placeholder="Write a query..." type="text" />
</div>
The relatively recent 'flex' display css property solves this problem for you:
All you need to do is change form's display to inline-flex, give .resizable_text_box flex-grow: 100; and give #question_text_box width: 100%
Full example from the OP:
<style>
#form_wrapper {
border: 1px solid blue;
width: 600px;
padding: 5px;
}
form {
display: inline-flex;
width: 100%;
}
.category_dropdown_container {
}
.resizable_text_box {
border: 1px solid red;
flex-grow: 100;
}
#question_text_box {
width: 100%
}
input[type="text"] {
}
input[type="submit"] {
background-color: lightblue;
width: 80px;
float: right;
}
</style>
<div id="form_wrapper">
<form accept-charset="UTF-8" action="/some_action" method="post">
<span class="category_dropdown_container">
<select class="chosen chzn-done" name="question[category_id]" id="selQJK">
<option value="1">Options</option>
</select>
</span>
<span class="resizable_text_box">
<input id="question_text_box" name="question[what]" placeholder="Write a query..." type="text" />
</span>
<input name="commit" type="submit" value="Ask!" />
</form>
</div>
Flex-box lets you do what you wanted to do with css for 15 years - its finally here! More info: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change some of those <span> elements to <div> elements; then float:left the division around your dropdown; then give the one of the right an overflow:hidden and the input element inside it a width:100%;.
Here's an example. Here it is again with a bigger drop down.
Except that screws up the submit button. So give the #form_wrapper non-static positioning (position:relative) and position the submit button absolutely. See this fiddle and this one.
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
What is the best way to vertically align all child elements within a containing div?
Should I be applying vertical-align:
top; to each element?
Is it OK to
just apply vertical-align: top; to
a wildcard?
This is my test case.
CSS;
#wrapper * { vertical-align: top; }
#wrapper label { display: inline-block; font-weight: 700; }
HTML;
<div id="wrapper">
<label>Label: </label><br /><span>(Sub Label)</span></div >
<input type="textbox" />
</div>
And a jsFiddle;
http://jsfiddle.net/vPU3z/7/
(I need to investigate this more but additionally, why, in IE7, does "label" take a block format instead of inline-block? The textbox drops under the label element.)
For a label you should be using.. the <label> tag:
Live Demo
HTML:
<div id="wrapper">
<label for="example">Label: <br />(Sub Label)</label>
<input type="text" id="example" />
</div>
CSS:
#wrapper label {
vertical-align: top;
display: inline-block;
font-weight: 700;
}
For your label:
#label {
position: absolute;
top: 0px;
}
I am trying to create tableless Form using and tags, im stuck.
I want the form look like this:
I should be able to set the width of textbox, text area and select in CSS.
Make each row a <p> containing a <label> and an <input>, both display: inline-block with preset width. (The <label> should be text-align: right)
The buttons can be float: right.
This is a good walk through: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
check out working example here:
http://jsfiddle.net/bRm3P/2/
<form>
<label>To: <input type="text" /></label>
<label>Subject: <input type="text" /></label>
<label>Message: <textarea></textarea></label>
<div class="submit-container">
<input type="submit" value="submit"/><input type="submit" value="submit"/>
</div>
</form>
<style>
form {
width: 500px;
}
label {
display: block;
text-align: right;
margin-bottom: 4px;
}
label input,label textarea {
border: 1px solid #DEDEDE;
width: 80%;
vertical-align: top;
}
.submit-container {
padding-top: 4px;
text-align: right;
}
</style>
A nice semantic layout would be one of the following:
<ul>
<li><label>To <input></label></li>
...
</ul>
Or with a dl (more common):
<dl>
<dt><label>To</label></dt><dd><input></dd>
...
</dl>
You will find lots of ways to layout the latter if you google for: definition list layout form