asked on

Horizontally centering a scalable button within a div

I am trying to horizontally center a button within a div without success. I have tried applying text-align:center to the div and also removing the float:left from the .btn rule in the css, which lets the text center but also stretches the button to the width of the containing div. The button is a scalable button using css and javascript found at http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors Can someone help me?

Here is the source code, the two images can be found at the link above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Scalable CSS Buttons Using PNG and Background Colors</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="imagetoolbar" content="false">
<meta name="MSSmartTagsPreventParsing" content="true">
<meta name="description" content="">
<meta name="keywords" content="">
<script type="text/javascript">
var btn = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
as = btn.getElementsByClassName('btn(.*)');
for (i=0; i<as.length; i++) {
if ( as[i].tagName == "INPUT" && ( as[i].type.toLowerCase() == "submit" || as[i].type.toLowerCase() == "button" ) ) {
var tt = document.createTextNode(as[i].value);
var a1 = document.createElement("a");
a1.className = as[i].className;
a1.id = as[i].id;
as[i] = as[i].parentNode.replaceChild(a1, as[i]);
as[i] = a1;
as[i].style.cursor = "pointer";
}
else if (as[i].tagName == "A") {
var tt = as[i].firstChild;
}
else { return false };
var i1 = document.createElement('i');
var i2 = document.createElement('i');
var s1 = document.createElement('span');
var s2 = document.createElement('span');
s1.appendChild(i1);
s1.appendChild(s2);
s1.appendChild(tt);
as[i].appendChild(s1);
as[i] = as[i].insertBefore(i2, s1);
}
// The following lines submits the form if the button id is "submit_btn"
btn.addEvent(document.getElementById('submit_btn'),'click',function() {
var form = btn.findForm(this);
form.submit();
});
// The following lines resets the form if the button id is "reset_btn"
btn.addEvent(document.getElementById('reset_btn'),'click',function() {
var form = btn.findForm(this);
form.reset();
});
},
findForm : function(f) {
while(f.tagName != "FORM") {
f = f.parentNode;
}
return f;
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
},
getElementsByClassName : function(className, tag, elm) {
var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for(var i=0; i<length; i++){
current = elements[i];
if(testClass.test(current.className)){
returnElements.push(current);
}
}
return returnElements;
}
}

btn.addEvent(window,'load', function() { btn.init();} );
</script>
<style type="text/css" media="screen">
body {
      padding: 20px;
      font-size: 0.85em;
      font-family: georgia, serif;
}
.btn {
      display: block;
      position: relative;
      background: #aaa;
      padding: 5px;
      float: left;
      color: #fff;
      text-decoration: none;
      cursor: pointer;
}
.btn * {
      font-style: normal;
      background-image: url(images/btn2.png);
      background-repeat: no-repeat;
      display: block;
      position: relative;
}
.btn i {
      background-position: top left;
      position: absolute;
      margin-bottom: -5px;
      top: 0;
      left: 0;
      width: 5px;
      height: 5px;
}
.btn span {
      background-position: bottom left;
      left: -5px;
      padding: 0 0 5px 10px;
      margin-bottom: -5px;
}
.btn span i {
      background-position: bottom right;
      margin-bottom: 0;
      position: absolute;
      left: 100%;
      width: 10px;
      height: 100%;
      top: 0;
}
.btn span span {
      background-position: top right;
      position: absolute;
      right: -10px;
      margin-left: 10px;
      top: -5px;
      height: 0;
}
* html .btn span, * html .btn i {
      float: left;
      width: auto;
      background-image: none;
      cursor: pointer;
}
.btn.blue {
      background: #2ae;
}
.btn.green {
      background: #9d4;
}
.btn.pink {
      background: #e1a;
}
.btn:hover {
      background-color: #a00;
}
.btn:active {
      background-color: #444;
}
.btn[class] {
      background-image: url(images/shade.png);
      background-position: bottom;
}
* html .btn {
      border: 3px double #aaa;
}
* html .btn.blue {
      border-color: #2ae;
}
* html .btn.green {
      border-color: #9d4;
}
* html .btn.pink {
      border-color: #e1a;
}
* html .btn:hover {
      border-color: #a00;
}
p {
      clear: both;
      padding-bottom: 2em;
}
</style>
</head>
<body>
<h2>CSS Buttons demo</h2>
<p>Feel free to enlarge font sizes and try the :hover effect.</p>
<div style="width:500px; background-color:#00FF00; text-align:center"><p style="float:none; "><a href="#" class="btn blue">This is a blue button</a></p></div>
Link back to the article: <a href="/kitchen/59/scalable-css-buttons-using-png-and-background-colors/">Scalable CSS Buttons Using PNG and Background Colors</a></p>
</body>
</html>

ASKER CERTIFIED SOLUTION

VirusMinus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

VirusMinus

im assuming my answer helped fly2079. why the B grade?

saying it can't be done and providing the next closest alternative does not make it any less of an answer.

A lot of experts including me take pride in our answers and try our best in keeping a track record of giving quality answered. Giving a higher grade does not cost you any extra points but reflects on our capability as experts. Experts often check your grading history and if they see a lot of C's and B's they will be less inclined to answer. I will most definitely be wary if you continue in the same fashion.

excerpt from EE guidelines: https://www.experts-exchange.com/help.jsp#hi55

-- "Grading at Experts Exchange is not like school. It's more like the "10-point Must" system in professional boxing; in other words, an answer is worth an A, unless it doesn't resolve your issue. If it requires you to do a little more research, or figure out one more piece of code, then it's worth a B. If you think it's not worth a B, the custom is to offer the Experts an opportunity to earn a better grade." --

For future reference, you can post a question requesting a grade change in the Community Support Topic Area with a link to the question you've graded incorrectly/unfairly.

fly2079

ASKER

Sorry, didn't see that guideline before...