Center form submit buttons HTML / CSS

HtmlCssCenterAlignment

Html Problem Overview

I'm having troubles centering my HTML form submit buttons in CSS.

Right now I'm using:

    <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">

with this CSS content

#btn_s{
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

#btn_i {
    width: 125px;
    margin-left: auto;
    margin-right: auto;
}

And it's not doing anything. I know I'm probably doing something stupid wrong. How can I fix this?

Html Solutions

Solution 1 - Html

http://jsfiddle.net/SebastianPataneMasuelli/rJxQC/

i just wrapped a div around them and made it align center. then you don't need any css on the buttons to center them.

<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; }

Solution 2 - Html

Input elements are inline by default. Add display:block to get the margins to apply. This will, however, break the buttons onto two separate lines. Use a wrapping <div> with text-align: center as suggested by others to get them on the same line.

Solution 3 - Html

I see a few answers here, most of them complicated or with some cons (additional divs, text-align doesn't work because of display: inline-block). I think this is the simplest and problem-free solution:

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;
}

Solution 4 - Html

Try this :

<!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>

This has 2 examples, you can use the one that fits best in your situation.

  • use text-align:center on the parent container, or create a container for this.
  • if the container has to have a fixed size, use auto left and right margins to center it in the parent container.

note that auto is used with single blocks to center them in the parent space by distrubuting the empty space to the left and right.

Solution 5 - Html

/* 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 */

Solution 6 - Html

I'm assuming that the buttons are supposed to be next to each other on the same line, they should not each be centered using the 'auto' margin, but placed inside a div with a defined width that has a margin '0 auto':

CSS:

#centerbuttons{
   width:250px; 
   margin:0 auto;
}

HTML (after removing the margin properties from your buttons' CSS):

<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>

Solution 7 - Html

<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>

Also Check this jsfiddle

Solution 8 - Html

One simple solution if only one button needs to be centered is something like:

<input type='submit' style='display:flex; justify-content:center;' value='Submit'>

You can use a similar style to handle several buttons.

Solution 9 - Html

You can do it with text-align: center.

.form-1 {
  text-align: center;
}
#btn_s {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
#btn_i {
  width: 125px;
  margin-left: auto;
  margin-right: auto;
}


<div class="form-1">
  <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>

Solution 10 - Html

If you want to take it to the next level, use flexbox:

.form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  gap: 1em;
}
#btn_s {
  width: 100px;
}
#btn_i {
  width: 125px;
}


<div class="form">
  <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>

Guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Center Solutions
Recommended Alignment Solutions

Previous Solution:

Int to byte array

C#.NetBytearrayInt32

Next Solution:

php: Array keys case *insensitive* lookup?

PhpArrays

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBelgin FishView Question on Stackoverflow
Solution 1 - HtmlSebastian Patane MasuelliView Answer on Stackoverflow
Solution 2 - HtmlTomView Answer on Stackoverflow
Solution 3 - HtmlAdrian AdamczykView Answer on Stackoverflow
Solution 4 - HtmlDarkWingDuckView Answer on Stackoverflow
Solution 5 - HtmlDave TaitelbaumView Answer on Stackoverflow
Solution 6 - HtmlAnnieView Answer on Stackoverflow
Solution 7 - HtmlktaView Answer on Stackoverflow
Solution 8 - HtmlNagevView Answer on Stackoverflow
Solution 9 - Htmlankit chauhanView Answer on Stackoverflow
Solution 10 - HtmlYourBrainEatsYouView Answer on Stackoverflow