title: CSS arrow : How can I center a text?
body: <p>Please look at <a href="http://jsfiddle.net/yusaku/NqLuX/1/" rel="nofollow">http://jsfiddle.net/yusaku/NqLuX/1/</a></p>
  
  <p>I could display an arrow by using only CSS but I could never center a text (In this example , "abc") in the TD. Doing "text-align: center" seems to be unavailable.. Could anybody suggest me ? (It is OK, the position is not COMPLETELY center)</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;table&gt;
  &lt;tr&gt;
      &lt;td class="arrow_td"&gt;
          &lt;span class="name"&gt;abc&lt;/span&gt;
          &lt;div class="arrow"&gt;&lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;​
  
  
  td.arrow_td {
    width: 200px;
    text-align: right;
    background-color: black;
    color: white;
    white-space: nowrap;
  }
  td span.name {
      display: inline-block;
      vertical-align: middle;
  }
  td div.arrow {
      display: inline-block;
      vertical-align: middle;
      width: 0;
      line-height: 0%;
      border: none;
      border-left: 20px solid black;
      border-bottom: 20px solid white;
      border-top: 20px solid white;
      border-image: initial;
  }​
  </code></pre>