I have a <div> with display: inline; property and I want to center it.
If I put margin: 0 auto works without display but I need the display not to take all the space like it's a block.
Html
<div id="login1">
<fieldset id="login2">
<form method="post" action="register.php">
<label>Nombre: </label>
<input type="text" name="nombre" placeholder="Nombre de usuario"><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Password"><br>
<input type="submit" value="LogIn">
<input type="reset" value="Reset">
</form>
</fieldset>
</div>
Css
#login1 {
display: inline-block;
text-align: center;
}
I want to center all the <div>
Some idea?
Put text-align: center on the container (the element that contains your div).
And your div shall be centered.
Related
So when I change the width on my website it doesn't work I've tried changing position but it just will not work
HTML and CSS:
.wrapper-main{
display: block;
height: 54%; !important
width: 0px;
background-color: #fff;
margin-bottom: 15%;
text-align: center;
vertical-align: middle;
}
<div class="wrapper-main">
<section class="section-default">
<h1 class="header">Signup</h1>
<form action="includes/sign-up.inc.php" method="post">
<label for="username" id="label">Username</label><br>
<input type="text" id="username" placeholder="Username goes here.">
<br><br>
<label for="e-mail" id="label">E-mail</label><br>
<input type="text" id="e-mail" placeholder="E-mail goes here.">
<br><br>
<label for="pwd" id="label">Password</label><br>
<input type="password" id="pwd" placeholder="Password goes here.">
<br><br>
<label for="password" id="label">Password</label><br>
<input type="text" id="pwd-repeat" placeholder="Password goes here.">
<br><br>
<button type="Submit" name="signup-submit">Signup</button>
</form>
</section>
</div>
The problem is that the width value and !important value is, in this case, is invalid.
As you can see in the picture the property is invalid. Try to give width to a text form rather than a <div>.
Because you miss ; after your !important;
height: 54% !important;
width: 100px;
I have a question.. I have a div with 3 checkboxes and a textfield, so a form basically. The form is centered but now the checkboxes all align in the centre as well, and it does not look good. Does anyone know, how I can make them below each other?
<div class="forms" align=center>
<form action="/sendmail.php" method="post">
<p><input type="checkbox" name="xy" value="xy"> xy </p>
<p><input type="checkbox" name="zy" value="zy"> zy </p>
<p><input type="checkbox" name="XS" value="XS"> XS </p>
<p>Extra: <textarea name="extra" cols="30" rows="7" wrap="wrap"></textarea></p>
<input type="submit">
<input type="reset">
</form>
</div>
wrap the checkboxes in a div. In my snippet sample they a wrapped inside a div with the class .wrapper.
Then I use CSS attribute width: min-content;to make the width of that div only as wide as the largest content line. However this will cause an unwanted wordbreak behavior that is fixed with white-space: nowrap;.
last but not least, I give it a text-align: left; as the checkboxes are at the left side. That way they align below each other as they are aligned to the left side of the div.
.wrapper {
width: min-content;
white-space: nowrap;
text-align: left;
}
<div class="forms" align=center>
<form action="/sendmail.php" method="post">
<div class="wrapper">
<p><input type="checkbox" name="xy" value="xy"> xy </p>
<p><input type="checkbox" name="zy" value="zy"> zy </p>
<p><input type="checkbox" name="XS" value="XS"> XS </p>
</div>
<p>Extra: <textarea name="extra" cols="30" rows="7" wrap="wrap"></textarea></p>
<input type="submit">
<input type="reset">
</form>
</div>
So I have a simple login prompt like this:
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</form>
and the css:
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
https://jsfiddle.net/tzc6Lpur/
What I would like is that the bottom items are stretched over the entire width of the element so that login button would be lined up to the right end of the password box. Something like text-align: justify; would to that for text but I can't find an easy way to do this. Ofcourse I could manually position the elements but that just seems to be a lot redundant code.
any help is appreciated!
The easy way would be to change your markup accordingly:
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<div class="flex-wrap">
<label for="myCheckbox"><input name="myCheckbox" type="checkbox">Remember</label>
Forgot?
Register
<input type="submit" value="Login">
</div>
</div>
</form>
and use the following CSS:
.flex-wrap{
display: flex;
flex-direction: row;
justify-content: space-between;
}
#login{
float:right; //To mantain the form on the right of the screen
}
Flex box is supported by all modern browsers, but if you need to support
JSFiddle: https://jsfiddle.net/silviagreen/hcktxgva/3/
You can Use this to align your button to the right end.
<input id = "login_button" type="submit" value="Login">
and in css add
#login_button{
float:right;
}
You can use twitter-bootstrap-3 which will help you a lot. Take a look into it.
all you have to do is, add one more span and add float:right to it.
take a look at this. https://jsfiddle.net/adityap708/sedLvLp2/
<form id="login">
<legend>Login</legend>
<span>
<input type="text" value="Username">
<input type="password" value="Password"><br>
<span style="float:right;">
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</span>
</span>
</form>
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
You can the use flexbox on the wrapper elements which, really, should be block level and not a spans.
#login {
display: inline;
float: right;
line-height: 1.5em;
margin-right: 0.5em;
}
#login div {
display: flex;
justify-content: space-between;
}
<form id="login">
<legend>Login</legend>
<div>
<input type="text" value="Username">
<input type="password" value="Password">
</div>
<div>
<input type="checkbox">Remember
Forgot?
Register
<input type="submit" value="Login">
</div>
</form>
I want to display the inputbox with center alignment which is in div tag.Now I did this by using
<div class="nam">
<center><input type="text" name="name"></center>
<center><input type="text" name="pass"></center>
<center>
... </center>
</div>
I want to do this with css code.
Try following
HTML Code:
<div class="nam">
<div>
<input type="text" name="name">
</div><div>
<input type="text" name="pass">
</div>
</div>
CSS:
.nam{
text-align : center;
}
The <center> element was deprecated because it defines the presentation of its contents -- it doesn't describe its contents.
There are different ways of centering the things with CSS.
My suggestions is to adding text-align: center to your class nam.
.nam {
text-align: center;
}
<div class="nam">
<input type="text" name="name">
<input type="text" name="pass">
</div>
I have a form and I want to centre the text boxes and label to the middle. How can I do this? (I would have thought aligning the left and right to auto would do it but it doesn't work). This is my code:
<body>
<div id="formWrapper">
</center>
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
</div>
</body>
The style:
#formWrapper{
width:550px;
padding: 2em 0 2em 0;
border:solid 5px #F1F1F1;
margin-top: 100px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #AFC8DE;
}
If you apply text-align: center to the form it will place the fields in the center.
Semantics are important here, so take a look at an accessible approach to forms. http://www.alistapart.com/articles/prettyaccessibleforms
take a look at this: http://jsfiddle.net/7auS8/
add align="center" to your form
div id="formWrapper">
<form method ="post" action="addMember.php" align="center">
<label for="name" >Username:</label>
<input name="name"/>
<p>
<label for="password">Password:</label>
<input name="password"/>
<p>
<label for="email">Email:</label>
<input name="email"/>
<p>
<fieldset>
<input class="btn" name="submit" type="Submit" value="Register"/>
<input class="btn" name="reset" type="reset" value="Clear Form">
</fieldset>
</form>
</div>
border: 1px solid gray;
border-radius:5px;
color: #393939;
height: 30px;
padding: 0px 6px 0 6px;
width: 186px;
I took this code and tried out adarshr answer and it does center the form. Chris is also right the semantics are very important here because after seeing it I feel like this might not be exactly what you were looking for. Another point I wanted to add to this to someone reading this who is probably a beginner is that when you add text-align: center; it needs to go in the css file and end with a ;