html - css button : button horizontal align and size stretch with text size -

i'm trying make button left , middle (repeating) , right background:

<div class="horizontal">     <div class="mybutton">         <div class="left" ></div>         <div class="middle" >             text         </div>         <div class="right" ></div>     </div> </div> 

my css following:

.horizontal {       width: 100%;   }  .mybutton {     width: 120px;      height: 30px; }  .left {     background-image: url("http://i.stack.imgur.com/r5gpp.png");     /*border: 1px solid red;*/     float: left;     height: 30px;     width: 4px; }  .middle {     background-image: url("http://i.stack.imgur.com/yxpke.png");    /* border: 1px solid yellow;*/     float: left;     height: 30px;     padding-left: 5px;     padding-right: 5px;     text-align: center;     width: 100px; }  .right {     background-image: url("http://i.stack.imgur.com/oaple.png");     /*border: 1px solid green;*/     float: left;     height: 30px;     width: 4px; } 

now need is:

• mybutton aligned in middle of horizontal block (the page).

• and middle stretched text fit (without manually setting width 120px in example).

i have no clue how this.

here's fiddle : http://jsfiddle.net/kcbpw/3/ ,

thank much.

here's updated fiddle: http://jsfiddle.net/stevenschobert/fndrt/

to fix text-wrapping & vertical centering in .middle class, add line-height:30px , min-width:50px;

.middle {     min-width: 50px;     line-height:30px;     /* rest of styles ... */ } 

for horizontal alignment, can add text-align:center; .horizontal class , margin:auto; .mybutton.

.horizontal {     width: 100%;     text-align:center; }  .mybutton {     margin:auto auto;     /* cont... */ }