title: Side-by-side links with increased size on hover without upsetting other links
body: <p>I have a goal that I'm trying to accomplish with HTML and CSS only: With an inline list of links that grow in size upon hover and <strong>change fonts</strong> (this has caused odd issues before),</p>
  
  <p>A) Hovering one link shouldn't upset other links.</p>
  
  <p>B) Keep it dynamic to avoid tailoring the CSS to each new link.</p>
  
  <p>C) If margin: 0 20px 0 20px, that should be from the ends of the text -- This looks much cleaner, as it makes the spacing constant between links (see example for what should <em>not</em> be done). Fixed width containers usually violate this.</p>
  
  <p>D) Upon hover, the text should stay vertically and horizontally centered in place.</p>
  
  <p>E) Please try to keep it HTML and CSS only. If it includes JS or JQ, it would be more difficult to implement to to my lack of knowledge about the languages and the fact that the JSFiddle is just a stripped down example instead of my actual page.</p>
  
  <p>My best right now fits the first two and last criteria without meeting the third, and it uses tables (I <em>know</em>):</p>
  
  <p><a href="https://jsfiddle.net/1Lftpqha/6/" rel="nofollow">JSFiddle</a></p>
  
  <p>Or code:</p>
  
  <pre><code>&lt;table&gt;&lt;tr&gt;
      &lt;td&gt;&lt;div&gt;ONE&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div&gt;TWO&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div&gt;THREE&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div&gt;FOUR&lt;/div&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div&gt;FIVE&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>And...</p>
  
  <pre><code>div:hover {
      font-size: 130%;
      font-family: comic sans ms;
  }
  div {
      width: 10px;
      margin: 0 30px 0 30px;
      height: 20px;
  }
  </code></pre>
  
  <p>The issue is that the margin is being measured from the <em>div</em>, not the <em>text</em>, making it so I'd have to tailor the margin to each link. Additionally, hovering will make it seem like the font / link moves down and to the right, violating guideline D.</p>
  
  <p><a href="https://jsfiddle.net/1Lftpqha/7/" rel="nofollow">This</a> Works dynamically as long as the text isn't too long, but hovering upsets other links. It also violates D.</p>
  
  <p>Any help would be appreciated.</p>