title: css inline-block with aligned center
body: <p>I want a div that have same width as content which is done by <code>display: inline-block;</code><br>
  but when I use this,<code>text-align: center</code> not working anymore.<br>
  so my content just go left and inline-block apply to it.<br>
  like this:    </p>
  
  <pre><code>#div1 {
  position: relative;
  bottom: 10px;
  left: auto;
  text-decoration: overline underline;
  display: inline;
  text-align: center;
  }
  </code></pre>
  
  <p>it doesn't center the text of div anymore.<br>
  how I can get both effects of this two?</p>