CODEWITHSUNDEEP
htmlcssbuttonalignmentsubmit
Pradeep
Pradeep

Reputation: 1223

Center Align Submit button

I have a form with a textarea and submit button.
I floated textarea to left and submit button to right.

This is how it is displayed in Firefox.

enter image description here This is how it is displayed in IE.

enter image description here

This is the html code i have written.

<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; float: left;"></textarea>
   <input type="submit" style="width: 100px; float: right;" />
  </form>
</div>

This is the CSS Code:

#form {
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
}

How to align the submit button vertically in center with respect to the textarea.?

ANSWER :
I modified the code to meet my requirements.

This is the CSS code :

#form {
  overflow: auto;
  border: 1px solid black;
  width: 600px;
  padding-left: 10px;
 padding-right: 10px;
  }
 #form  textarea {
   vertical-align: middle;
  }
 #form span{
   display: inline-block;
   vertical-align: middle;
  margin-left: 40px;
}

HTML Code: 

 <div id="form">
    <form method="post" action="google.php">
    <textarea rows="3" cols="40"  style="width: 300px; "></textarea>
    <span><input type="submit" value="Comment"  /></span> </form>
 </div>

Upvotes: 3

Views: 47089

Answers (6)

Veni
Veni

Reputation: 11

you can give margin-left or margin-right property.

ex:

margin-left:135px;

Upvotes: 1

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

You can make use of display:table and display:table-cell, property. But in this case you have to remove floats and give specific width.

HTML

<div id="form">
  <form method="post" action="google.php">
      <div class='wrap'>
   <textarea rows="3" cols="40"></textarea>
      </div>
       <div class='wrap_2'>
<input type="submit"/>
      </div>
  </form>
</div>

CSS

#form{
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
 display:table;
}

div.wrap, 
div.wrap_2 {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

div.wrap {
    width:500px 
}

FIDDLE:

http://jsfiddle.net/7gnMu/

Upvotes: 1

web2008
web2008

Reputation: 914

In this case vertical-align: bottom will not work. Instead height and line-height will make your button to align vertically centered.

Included following styles for input:

height: 80px; 
line-height: 70px

Have a look at working demo here: Demo

Upvotes: 0

Mary
Mary

Reputation: 21

You could use position: absolute on the submit button, and set it 50% from the top, minus half the height of the button in margin-top. See this fiddle:

http://jsfiddle.net/cXSbX/

Upvotes: 1

Arun Bertil
Arun Bertil

Reputation: 4638

Try the Js fiddle

http://jsfiddle.net/wZs2F/

#form {
 overflow: auto;
 border: 1px solid black;
 width: 600px;
 padding-left: 10px;
 padding-right: 10px;
}
.txtinput
{
 margin-left:100px;
}


<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; "></textarea>
      <div class="txtinput">
   <input type="submit" style="width: 100px;"  />
          </div>
  </form>
</div>

Upvotes: 0

max li
max li

Reputation: 2457

Wrap the input with some element and text center align the input.

<div id="form">
  <form method="post" action="google.php">
   <textarea rows="3" cols="40"  style="width: 300px; float: left;"></textarea>
      <span class="right" style="width: 278px; float: right; text-align:center;"><input type="submit" display:inline-block; /></span>
  </form>
</div>

http://jsfiddle.net/UuFg2/

Upvotes: 0

Related Questions