Ik heb problemen met het centreren van de knoppen voor het indienen van mijn HTML-formulier in CSS.
Op dit moment gebruik ik:
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
met deze CSS-inhoud
#btn_s{
width: 100px;
margin-left: auto;
margin-right: auto;
}
#btn_i {
width: 125px;
margin-left: auto;
margin-right: auto;
}
En het doet niets. Ik weet dat ik waarschijnlijk iets stoms verkeerd doe. Hoe kan ik dit oplossen?
Antwoord 1, autoriteit 100%
http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/
ik heb er net een div omheen gewikkeld en deze in het midden uitgelijnd. dan heb je geen css op de knoppen nodig om ze te centreren.
<div class="buttonHolder">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
.buttonHolder{ text-align: center; }
Antwoord 2, autoriteit 25%
Invoerelementen zijn standaard inline. Voeg display:blocktoe om de marges toe te passen. Dit zal echter de knoppen op twee afzonderlijke regels breken. Gebruik een terugloop <div>met text-align: centerzoals voorgesteld door anderen om ze op dezelfde regel te krijgen.
Antwoord 3, autoriteit 13%
Ik zie hier een paar antwoorden, de meeste ingewikkeld of met enkele nadelen (extra divs, text-align werkt niet vanwege display: inline-block). Ik denk dat dit de eenvoudigste en probleemloze oplossing is:
HTML:
<table>
<!-- Rows -->
<tr>
<td>E-MAIL</td>
<td><input name="email" type="email" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register!" /></td>
</tr>
</table>
CSS:
table input[type="submit"] {
display: block;
margin: 0 auto;
}
Antwoord 4, autoriteit 6%
Probeer dit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
#btn_s{
width:100px;
}
#btn_i {
width:125px;
}
#formbox {
width:400px;
margin:auto 0;
text-align: center;
}
</style>
</head>
<body>
<form method="post" action="">
<div id="formbox">
<input value="Search" title="Search" type="submit" id="btn_s">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit" id="btn_i">
</div>
</form>
</body>
Dit heeft 2 voorbeelden, u kunt degene gebruiken die het beste bij uw situatie past.
- Gebruik
text-align:centerop de bovenliggende container of maak hier een container voor. - Als de container een vaste grootte moet hebben, gebruikt u
autoLinks en rechtermarges om deze in de oudercontainer te centreren.
Merk op dat autowordt gebruikt met enkele blokken om ze in de bovenliggende ruimte te centreren door de lege ruimte aan de linkerkant en rechts te distributeren.
Antwoord 5, Autoriteit 3%
/* here is what works for me - set up as a class */
.button {
text-align: center;
display: block;
margin: 0 auto;
}
/* you can set padding and width to whatever works best */
Antwoord 6
<style>
form div {
width: 400px;
border: 1px solid black;
}
form input[type='submit'] {
display: inline-block;
width: 70px;
}
div.submitWrapper {
text-align: center;
}
</style>
<form>
<div class='submitWrapper'>
<input type='submit' name='submit' value='Submit'>
</div>
Controleer dit ook JSFiddle
Antwoord 7
Ik neem aan dat de knoppen het naast elkaar op dezelfde lijn moeten staan, ze mogen niet elk gecentreerd worden met behulp van de ‘Auto’-marge, maar geplaatst in een div met een gedefinieerde breedte die een marge heeft’ 0 Auto ‘:
CSS:
#centerbuttons{
width:250px;
margin:0 auto;
}
HTML (na het verwijderen van de marge-eigenschappen van uw CSS van uw knoppen):
<div id="centerbuttons">
<input value="Search" title="Search" type="submit">
<input value="I'm Feeling Lucky" title="I'm Feeling Lucky" name="lucky" type="submit">
</div>
Antwoord 8
Een eenvoudige oplossing als er maar één knop gecentreerd hoeft te worden, is zoiets als:
<input type='submit' style='display:flex; justify-content:center;' value='Submit'>
Je kunt een vergelijkbare stijl gebruiken om verschillende knoppente verwerken.