title: css button : button horizontal align and size stretch with text size
body: <p>I'm trying to make a button with a left <img src="https://i.stack.imgur.com/0a02t.png" alt="enter image description here">, middle <img src="https://i.stack.imgur.com/yXPkE.png" alt="enter image description here"> (repeating) and right   <img src="https://i.stack.imgur.com/iqOUe.png" alt="enter image description here"> background:</p>
  
  <pre><code>&lt;div class="horizontal"&gt;
      &lt;div class="myButton"&gt;
          &lt;div class="left" &gt;&lt;/div&gt;
          &lt;div class="middle" &gt;
              some text
          &lt;/div&gt;
          &lt;div class="right" &gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css is the following:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Now what I need is:</p>
  
  <ul>
  <li><code>myButton</code> to be aligned in the middle of the <code>horizontal</code> block (the page).</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/XD8TM.png" alt="enter image description here"></p>
  
  <ul>
  <li>And the <code>middle</code> to be stretched so any text would fit (without manually setting the width to 120px in my example).</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/JY3gj.png" alt="enter image description here"></p>
  
  <p>I have no clue how to do this.</p>
  
  <p>Here's a fiddle : <a href="http://jsfiddle.net/kCBpw/3/" rel="nofollow noreferrer">http://jsfiddle.net/kCBpw/3/</a> , </p>
  
  <p>thank you very much.</p>