A Truly Vertically Centred Button

First off, this is my first post, though TheScripts has solved gazillions of my C/PHP/SQL/HTML problems for years.You guys rock!

That said, consider the table cell

[HTML]<td> 
<form>
<input name="button" type=button value=Go>
</form>
</td>[/HTML]

This will produce a cell with a button vertically centred, but visibly
off: the button is being centred by its baseline, not its true centre.
What CSS can be applied to truly make this button vertically centred
(i.e., the space above and below is equal)?

Also consider what happens when Line 1 is replaced with <td style="vertical-align:bottom">. White space appears between the button and the cell floor, and nothing--not margin:, not border-spacing, nothing--seems to be able to get rid of it. What can be done to make the button actually touch bottom? Perhaps this space is impacting how it centres?

Thanks!

Sep 26 '07 #1

Subscribe Post Reply

2026

drhowarddrfine

7,435

Expert 4TB

To make the button touch the bottom, it's the td that's causing the space:
td{margin:0;padding:0}

vertical-align:middle looks vertically centered to me.

Sep 26 '07 #2

spamguy

To make the button touch the bottom, it's the td that's causing the space:
td{margin:0;padding:0}

vertical-align:middle looks vertically centered to me.

Hmmm. Your suggestion nudged it down a few pixels, but there's still a clear ~20px space between the button base and cell base.

To give you an idea of what I'm seeing, take a look at this pic. The cell on the left is vertical-align:middle; on the right, vertical-align:bottom. As you can see, both are well north of where they should be.

Sep 27 '07 #3

drhowarddrfine

7,435

Expert 4TB

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<style type="text/css">
td{
height:100px;
outline:1px solid red;
vertical-align:bottom;
margin:0;padding:0;
}
</style>
</head>

<body>

<table>
<tr>
<td> 
<form>
<input name="button" type=button value=Go>
</form>
</td>
</tr>
</table>

</body>
</html>[/HTML]

Sep 27 '07 #4

spamguy

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<style type="text/css">
td{
height:100px;
outline:1px solid red;
vertical-align:bottom;
margin:0;padding:0;
}
</style>
</head>

<body>

<table>
<tr>
<td> 
<form>
<input name="button" type=button value=Go>
</form>
</td>
</tr>
</table>

</body>
</html>[/HTML]

I was about to say there was no difference in what you supplied. When I made a precise copy, though, it worked. The magic tag?

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01//EN" "http://www.worg/TR/html4/strict.dtd">[/html]

This is the first time that dumb tag has done anything useful for me. Thanks for your help!

Sep 27 '07 #5

drhowarddrfine

7,435

Expert 4TB

FF2 and IE6. Post your markup or show a link.

Sep 27 '07 #6

spamguy

(Above post edited with solution.)

Sep 27 '07 #7

Similar topics

Form shrinks vertically

by: Lyn | last post by:

Hi, I have a form which is opened from a button on another form. The form is used to display a list of records from a recordset in Continuous Mode. It is sized vertically to display about 25...

Microsoft Access / VBA

centred text / css selector precedence

by: martin.eyles | last post by:

I am having a problem with this page:- http://www.bytronic.com/tests/centre.html I want a nice centred paragraph, but get a justified paragraph. I expected the .centre to override the #content...

HTML / CSS

How do I get the floated elements to be centred?

by: Alan Silver | last post by:

Hello, If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a simplified version of a page that could be used to display thumbnail images of various products. Now, due to...

HTML / CSS

Can I set margins on a centred div and still use max-width?

by: Alan Silver | last post by:

Suppose I have a div that contains the content of my page. I would like to have this div centred in the browser, with a (say) 10px margin on either side. So far, no problem... (WARNING - the HTML...

HTML / CSS

How do I centre an <h3> vertically inside a <div>?

by: Alan Silver | last post by:

Hello, Please pardon what is probably a dumb question, but if I have HTML like this... <div> <h3>Ferrets</h3> </div> and CSS like this...

HTML / CSS

open Centred popup and close parent window

by: Socrates | last post by:

Hi - Have tried for half and hour to get this script to work: I am trying to close the parent window while opening a centred new child window I would be grateful if someone could correct the...

Javascript

vertically aligning radio buttons with a header

by: Greg Scharlemann | last post by:

I'm having difficulty getting the radio buttons to align vertically with one another and the header (1 2 3 4 5) at the top. Ideally each radio button will be directly below the one above it and...

HTML / CSS

A Truly Vertically Centred Button

by: william.oram | last post by:

Consider the table cell <td <form> <input name="button" type=button value=Go> </form> </td> This will...

HTML / CSS

CSS Button text centered vertically

by: Maxime | last post by:

Hello, I want to make a button that automatically resizes according to the text length and the font size (which can be changed in firefox pretty easily with the browser). The button already...

HTML / CSS

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware