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

i have input button fixed width @ 20px using box-sizing: content-box.

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

the width of button 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 @ 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 works fine, need able produce full screen button centered text. can more or less set button padding-right 96% have no idea how center text because text-indent not take percentage values.

question:
possible stretch button , center it's text via css if button width fixed, button length set using padding? curious if has idea, how this.

thanks!

there no way achieve while using fixed width. if open adjusting width following styling work. important parts 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 @ 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/