Fixed Height Dynamic Text Buttons [Archive]

seths

02-12-2010, 07:32 PM

I've been researching this for about 4 hours now and I'm simply amazed that it isn't being discussed all over the web, but perhaps I'm missing something obvious.

I'm trying to replicate the way a <button> tag works. Create a button with a <button> tag, set a fixed height (say 40px) and no matter what text you put in that button, it will be perfectly centered (horizontally and vertically). Multiple lines wrap and the browser readjusts the padding automatically to fix the text and keep it centered.

Now, the horizontal alignment is obviously trivial. It's the vertical alignment that seems to be impossible. There are tons of solutions out there when you search for vertical alignment, but none of them seem to apply to this situation where you have a fixed height container and variable line content.

If it's still not clear, assume I have a side navigation bar with two buttons:

About
Us

Contact

The first button is on two lines, the second is on one, but I want a uniform sized button with the text centered vertically. The easy solution of course would be to just create pngs for each link, but the links are dynamic (pulled from a database). What is driving me crazy is if the <button> tag can do it, why can't I replicate it with css?

p.s. I did come up with a solution where I wrapped a button tag in a anchor tag, but I couldn't get the link to work anymore in IE for some reasons.

Josephbm91

02-14-2010, 10:58 AM

I don't know of a vertical align feature. What I would do is make a php function to make the buttons for you. I bet there is a better way, but here's how I'd do it. This will be kind of a lengthy post so I'll post the code at the bottom to keep it neat.

First, I made a div class "button" to simulate a button container. Fixed height, fixed width.

I then made classes oneline and twolines for the <a> element that will have different margins from the top depending on whether the text in the div will have one or two lines. Text that takes up two lines is taller than text that takes up one line, so oneline will have a larger margin-top than twolines every time. Set heights for these classes that accommodate the height of the text. I would use contrasting background color and text for the <a> element to make sure you get a good height. Make sure the height is an even number. This will be important for determining the margin-top necessary to vertically center. For one line of text, I set the height to 20px. To determine how to center vertically, you take:

(height of the container - height of element to be centered) / 2.

(This works for centering left to right as well as vertically)

So our container, the class "buttons", is 100px; and we determined the height of one line of text to be 20px.

(100-20)/2=40. So margin top will be 40px.

I assigned twolines a height of 40px. Repeating the process:

(100-40)/2=30. Margin top will be 30px.

That concludes the style:

Now for the PHP.

The logic is, after a certain amount of characters, the text will wrap. Use trial and error on your own to figure out about how much that will be. For this font width, I'd say about 20. Test this strenuously though!

So here's all the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test for teh PHPz!</title>

<style type="text/css">

.button{
border: 1px solid #000000;
height: 100px;
width: 150px;
font-face: Arial;
font-size: 1em;
margin: 10px auto;
text-align: center;
}

a{
display: block;
width: 150px;
height: 20px;
color: #FFFFFF;
background-color:#000000;
margin: 0px auto;
text-align: center;}

a.oneline {margin-top: 40px; height: 20px;}

a.twolines {margin-top: 30px; height: 40px;}

</style>

</head>

<body>

<?php

// Create a multidimensional array that specifies URL and Anchor Text
// Format: array("URL","Anchor Text")

$buttons = array(
array('URL' => 'page1.php', 'anchorText' => 'One Line'),
array('URL' => 'page2.php', 'anchorText' => 'This line wraps. Who wouldve known?'));

//Create a for loop to go through each button
for ($i = 0; $i<count($buttons); $i++)
{

echo "<div class=\"button\">";

if (strlen($buttons[$i]['anchorText']) > 20) //Is the anchor text longer than 20 characters?
$linkClass = "twolines"; //If so, it will have the class "twolines"
else
$linkClass = "oneline"; //If not, it will have the class "oneline"

$URL = $buttons[$i]['URL'];
$anchorText = $buttons[$i]['anchorText'];

echo "<a class=\"$linkClass\" href=\"$URL\">$anchorText</a></div>\n";

}

?>

</body>
</html>

I know it's more of a terrible workaround than a solution, but it was fun to make!