How can I get this submit button centered?

Posted on 2013-12-23
Medium Priority
Last Modified: 2013-12-24
Check out my site at http://www.muscularchristianityonline.com/campus. I want to get the "submit" button at the top of the page centered relative to the fields to the left.

I've got my HTML below. You can find the stylesheet at http://www.muscularchristianityonline.com/stylesheet.css.

<table class="login">
		<td style="width:410px; height:23px; vertical-align:center;">
		<form action="student_validate_header.php" method="Post" style="display:inline; padding:0;"><input type="text" size="23" class="login" name="email" value="email">
		<input type="password" size="23" class="login" name="password" value="password">
		<input type="image" src="images/login.png" border="0" name="submit"></form></td>
		<IMG SRC="images/spacer.gif" width="325" height="23">
		<td background="images/spacer.gif" width="175" height="23" style="vertical-align:top;">
			<table style="padding:0px; border-spacing:0; border-collapse:collapse; background-color:#ffffff;"><form action="search.php" method="Post" style="display:inline; margin:0;">
			<input type="text" name="search" size="23" value="" style='border:0px; height:18px'>
			<td style="vertical-align:top;">
			<input type="image" src="images/search_icon.png" border="0" name="submit">

Open in new window

Question by:brucegust

Accepted Solution

Adrian Crabtree earned 1200 total points
ID: 39737096
If you add "vertical-align: middle;", that should fix your issue. 


input[name="submit"] { 
  vertical-align: middle;

Open in new window

LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 600 total points
ID: 39737138
In addition, the button is wrapped below the email input when viewing in chrome. When in the console, I added 10px to the td and it worked although not centered vertically.  You should either make the inputs a little smaller or the td a little wider.
LVL 35

Assisted Solution

by:Dan Craciun
Dan Craciun earned 200 total points
ID: 39737430
For me, Chrome displayed it in line with the login fields, but Firefox displayed it below.

Anyway, vertical-align: middle seems to align it on the bottom of the fields (see picture). You need a margin-bottom of 2-3px to make it look like it's center vertically.

Submit button in ChromeSubmit button in Firefox

Author Comment

ID: 39738183
Thanks guys!

I got it done, thanks to your expertise and counsel.

I've got another question at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28325170.html and would welcome your suggestions.

Thanks and Merry Christmas!

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question