• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1090
  • Last Modified:

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>
0
fly2079
Asked:
fly2079
  • 2
1 Solution
 
VirusMinusCommented:
unfortunately the way the buttons work with float:left means you cannot center them with text-align or margin:auto;

the best you can do for now is, to give the containing div a position:relative

and then the button class a absolute position.. it won't center buttons exactly but move them 40% to the left.. and if the buttons are all of a varying size then the left edges will all be aligned.

eg:

.btn {
      display: block;
      position: absolute;
      left:40%;
      background: #aaa;
      padding: 5px;
      float: left;
      color: #fff;
      text-decoration: none;
      cursor: pointer;
}
0
 
VirusMinusCommented:
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: http://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.
0
 
fly2079Author Commented:
Sorry, didn't see that guideline before...
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now