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.
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!
Fixed Height Dynamic Text Buttons
Reply With Quote
Bookmarks