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

2028

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

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

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

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

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

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing