Ik heb alles geprobeerd. Ik krijg dit niet gecentreerd op het scherm. Ik gebruik ie 9 maar het doet hetzelfde in chrome. Het staat gewoon aan de linkerkant van de webpagina. Bedankt voor alle hulp.
<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>
Antwoord 1, autoriteit 100%
Een andere manier
body {
text-align: center;
}
form {
display: inline-block;
}<body>
<form>
<input type="text" value="abc">
</form>
</body>Antwoord 2, autoriteit 45%
- Wikkel je formulier in een div.
- Stel de weergave van de div in op blokkering en tekst-uitlijning om te centreren (hierdoor wordt de ingesloten vorm gecentreerd).
- Stel de weergave van het formulier in op inline-block (automatische grootte naar inhoud), linker- en rechtermarges op automatisch (horizontaal gecentreerd) en tekstuitlijning naar links (anders worden de onderliggende items ook in het midden uitgelijnd).
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;
}
Antwoord 3, autoriteit 24%
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 */
?
Werkt & getest in Chrome/IE/FF
Antwoord 4, autoriteit 20%
Je kunt het proberen
form {
margin-left: 25%;
margin-right:25%;
width: 50%;
}
Of
form {
margin-left: 15%;
margin-right:15%;
width: 70%;
}
Antwoord 5, autoriteit 7%
Probeer dit toe te voegen aan je css
.form { width:985px; margin:0 auto }
en voeg width:100% toe aan de body-tag
Zet dan:
<div class="form">
vóór de tag.
Antwoord 6, autoriteit 4%
ik weet niet of de volledige resolutie hiervoor al is gemaakt. ik weet dat als ik een pagina met 2 kolommen en een vaste balk aan de linkerkant maak, om een contactformulier op mijn pagina te krijgen, ik het volgende plaats:
form {
width: 100%;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
dit werkte voor mij, dus dacht id gooi in mijn oplossing voor hetzelfde probleem
Antwoord 7, autoriteit 4%
Deze beste oplossing die ik online heb gevonden, is het gebruik van absolute positionering.
.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-49%, -49%);
}
Antwoord 8, autoriteit 2%
U kunt deze code proberen voor uw ‘body’-tag, deze naar wens wijzigen..
body {
display: flex;
justify-content: center;
margin-top: 5%;
align-items: center;
}
Antwoord 9
Je kunt de volgende CSS gebruiken om het formulier te centreren (merk op dat het belangrijk is om de breedte in te stellen op iets dat niet ‘auto’ is om dit te laten werken):
form {
margin-left:auto;
margin-right:auto;
width:100px;
}
Antwoord 10
I css Ik heb geen idee
maar dat heb ik gemaakt door het formulier in html te centreren
zoiets als dit:
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;}
vervolgens 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>
Hiermee wordt het formulier gecentreerd en staat de inhoud links van het gecentreerde formulier.
Antwoord 11
Normaal gesproken, als u een softwareprobleem op stackoverflow opzoekt, vindt u snel een duidelijk antwoord. Maar in CSS leidt zelfs zoiets eenvoudigs als “een formulier centreren” tot een lange discussie en veel mislukte oplossingen.
Correctie: de oplossing van orfdorf (hierboven) werkt.
Antwoord 12
body {
text-align: center;
}
form {
width:90%;
background-color: #c0d7f8;
}<body>
<form>
<input type="text" value="abc">
</form>
</body>Antwoord 13
<!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>
<a href = "#"> froget password!</a>
<a href = "#"><span>?</span>help</a>
</form>
</div>
</body>
</html>Antwoord 14
Een andere oplossing (zonder wrapper) zou zijn om het formulier in te stellen op display: table, waardoor het zich als een tabel zou gedragen, zodat het de breedte van het grootste kind zou hebben, en vervolgens van toepassing te zijn margin: 0 autoom het te centreren.
form {
display: table;
margin: 0 auto;
}
Krediet gaat naar: https://stackoverflow.com/a/49378738/7841955
Antwoord 15
Ik had hetzelfde probleem (ik gebruik google)
Wat ik deed, is dat ik het align-attribuut aan het formulier heb toegevoegd
<form align="center">
<!--Stuff-->
</form>
Dat is een oplossing