title: Center nowrap text in a resizable div
body: <p>I have a resizable sidebar menu on my website. The sidebar has a collapse animation transition when it collapses. Some of the text in this sidebar needs to be centered. The problem is if you use something like <code>text-align: center;</code> to format the text, the text shifts around when you resize its container div because the center point of the div is changing.</p>
  <p>The best I could do to combat this was to set <code>white-space: nowrap;</code> and eyeball the left padding to manually center the text. This works great, except I have text that is generated dynamically that I have to center. This means that with this method I would have to dynamically find the length of the text and adjust the padding accordingly, which seems wrong.</p>
  <p>It doesn't have to use the nowrap style, but is there some way to keep text centered in a div and not shift when the div is resized?</p>
  <p>jsfiddle illustration: <a href="https://jsfiddle.net/singerbradley/dvmauj3f/28/#&amp;togetherjs=nvnJwReUA7" rel="nofollow noreferrer">https://jsfiddle.net/singerbradley/dvmauj3f/28/#&amp;togetherjs=nvnJwReUA7</a></p>
  <h1>EDIT:</h1>
  <p>Let me clarify what I'm going for. I want the text in the resizing div to be centered when the div is at full width and stay in that position while the div is resized. I also want the text to appear cut off when the container shrinks (achieved here by using <code>overflow: hidden;</code> and <code>white-space: nowrap;</code>) instead of going to the next line. Basically, I want what is happening in the bottom box without the text moving when the container shrinks.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.enhance {
    border-color: red;
    border-style: solid;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 20px 0;
    width: 300px;
    overflow: hidden;
    transition: all .5s linear;
  }
  
  #wrap {
    text-align: center;
  }
  
  #nowrap {
    white-space: nowrap;
    text-align: center;
  }
  
  #wrap:hover {
    width: 50px;
  }
  
  #nowrap:hover {
    width: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p style="width:500px;"&gt;
  Hover over each box to see it in motion. The centered, line wrap text shifts with div resize.
  &lt;/p&gt;
  &lt;div id="wrap" class="enhance"&gt;This text has line wraps.&lt;/div&gt;
  &lt;div id="nowrap" class="enhance"&gt;This text has no line wraps.&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>