How to stretch an input button to available width and center it's text using CSS padding and text-indent?

Question

I have an input button with fixed width at 20px using box-sizing: content-box.

<input data-role="none" type="button" class="icon_text" value="click me" />

The width of the button is set using padding only.

Example:

.icon_text {
    border: 1px solid #aaa;
    border-radius: .7em;
    -moz-border-radius: .7em;
    -webkit-border-radius: .7em;
    color: white !important;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    background-color: #7EB238;
    background-image: url("p.png");
    background-image: url("p.png"), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(rgba(52,109,28,1)), color-stop(rgba(52,109,28,0) )), -webkit-gradient(linear, left top, left bottom, from( #9ad945 ), to( #7eb238 )); 
    background-image: url("p.png"), -webkit-radial-gradient(center, ellipse cover,  rgba(52,109,28,1), rgba(52,109,28,0) ), -webkit-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), -moz-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0) ), -moz-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), -ms-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0) ), -ms-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), -o-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0) ), -o-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), radial-gradient(ellipse at center, rgba(52,109,28,1) 67%, rgba(52,109,28,0) 69%), linear-gradient( #9ad945, #7eb238 );
    background-attachment: scroll, scroll, scroll;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: -100px 50%, 7px 50%, center center;
    background-size: 864px 18px, 20px 20px, auto auto;
    -webkit-background-size: 864px 18px, 20px 20px, auto auto;
    background-clip: content-box, content-box, padding-box;
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box;   
    box-sizing: content-box;
    text-indent: 2.1em;
    padding-top: 6px;
    padding-bottom:7px;
    padding-left: 7px;
    padding-right:92px;
    width: 20px;
    height: 20px;

}

While this works fine, I need to be able to produce a full screen with button with centered text. I can more or less set the button padding-right to 96% but I have no idea how to center the text because text-indent does not take percentage values.

Question:
Is it possible to stretch a button and center it's text via CSS only if the button width is fixed, button length is set using padding? Just curious if someone has an idea, how to do this.

Thanks!

Answer 1

There is no way to achieve this while using a fixed width. If you are open to adjusting the width the following styling will work. The important parts are display:block, width:100%, text-align:center.

.icon_text {
    border: 1px solid #aaa;
    border-radius: .7em;
    -moz-border-radius: .7em;
    -webkit-border-radius: .7em;
    color: white !important;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    background-color: #7EB238;
    background-image: url("p.png");
    background-image: url("p.png"), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(rgba(52,109,28,1)), color-stop(rgba(52,109,28,0) )), -webkit-gradient(linear, left top, left bottom, from( #9ad945 ), to( #7eb238 )); 
    background-image: url("p.png"), -webkit-radial-gradient(center, ellipse cover,  rgba(52,109,28,1), rgba(52,109,28,0) ), -webkit-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), -moz-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0) ), -moz-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), -ms-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0) ), -ms-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), -o-radial-gradient(center, ellipse cover, rgba(52,109,28,1), rgba(52,109,28,0) ), -o-linear-gradient( #9ad945, #7eb238 ); 
    background-image: url("p.png"), radial-gradient(ellipse at center, rgba(52,109,28,1) 67%, rgba(52,109,28,0) 69%), linear-gradient( #9ad945, #7eb238 );
    background-attachment: scroll, scroll, scroll;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: -100px 50%, 7px 50%, center center;
    background-size: 864px 18px, 20px 20px, auto auto;
    -webkit-background-size: 864px 18px, 20px 20px, auto auto;
    background-clip: content-box, content-box, padding-box;
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box;   
    box-sizing: content-box;
    text-indent: 2.1em;
    padding-top: 6px;
    padding-bottom:7px;
    padding-left: 7px;
    padding-right:92px;
    height: 20px;
    display: block;
    width: 100%;
    text-align: center;
}

Working Example: http://jsfiddle.net/3bCB2/