Solved

How can I get this submit button centered?

Posted on 2013-12-23
4
229 Views
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">
		<tr>
		<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>
		<td>
		<IMG SRC="images/spacer.gif" width="325" height="23">
		</td>
		<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;">
			<tr>
			<td>
			<input type="text" name="search" size="23" value="" style='border:0px; height:18px'>
			</td>
			<td style="vertical-align:top;">
			<input type="image" src="images/search_icon.png" border="0" name="submit">
			</td>
			</tr>
			</table></form>
		</td>
		</tr>
		</table>

Open in new window

0
Comment
Question by:brucegust
4 Comments
 
LVL 8

Accepted Solution

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

CSS

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

Open in new window

0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 150 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.
0
 
LVL 34

Assisted Solution

by:Dan Craciun
Dan Craciun earned 50 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
0
 

Author Comment

by:brucegust
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!
0

Featured Post

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jquery add something to a div 4 43
Alignment is not working correctly. 8 39
Overlap photo won't go all the way to the right 1 18
flex div overflows its container 4 22
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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