以下サイトの場合「abc」が右寄ですが、中央に表示したいです。
矢印を含めた完全な中央でなくても構いません。もちろん矢印分も考慮して中央に寄せられるのであれば尚良いですが。（単純に「text-align: center」するだけでは矢印部分が正しくなりません）
http://jsfiddle.net/yusaku/NqLuX/1/
<html>
<body>
<table>
<tr>
<td class="arrow_td">
<span class="name">abc</span>
<div class="arrow"></div>
</td>
</tr>
</table>
</body>
</html>
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;
}
No.1
4967
2151
100pt
td 要素の幅が 200px だということを前提にしてますが、以下のような感じではどうですか？
http://jsfiddle.net/NqLuX/2/
No.2
1504493
100pt
http://jsfiddle.net/cherenkov/NqLuX/4/
以下のスタイルを追加しました。（高さを調整する場合はspan.nameにtopを指定する）。
.arrow_tdにposition: relativeを設定することで、.nameの位置を相対的に指定しました。
td.arrow_td { position: relative; } td span.name { position: relative; left: -65px; }
おお！試しました。-65pxだと幅が可変なので対応できないかと思い、試しに-50%としたら中央あたりに表示しました。これでお客さん納得してくれそう。聞いてみます。ありがとうございます！
あ、でも問題が... colspanとかしているところがズレます。文章では伝えにくいのでまたjsfiddleに書きます。ですが すみません。今日は寝ます。よければまた見て頂けると幸いです。
No.3
811232
100pt
我が宿敵（とも）id:a-kuma3からリクエストを頂いたので回答しますね。
td span.name { display: inline-block; vertical-align: middle; margin-right: -20px; text-align: center; width: 100%; }
http://jsfiddle.net/NqLuX/36/
マイナスマージンを使っています。ちょっと時間がなくてIE6で未テストです。大丈夫だと思うのですがうまく表示されない場合はご容赦下さい。
Lhankor_Mhyさん。いつもありがとうございます。Lhankor_Mhyさんのコードを採用させて頂きます。後で書きますが、ある条件の時レイアウトが崩れるパターンがありまして、もし良かったらそちらも見てください。jsfiddleに書きます。
データバンクってなんですか？ とある国の調査結果を基にあらゆるデータを蓄積しているデータベースっていう認識で良いんですかね。 h…
2
1
1
5
1
121
120
いや、id:Lhankor_Mhy さんとの掛け合いが楽しかったんで、覚えてるんですわ。
2012/02/13 00:58:17border で矢印を表現する、というのも勉強になったし。
時間に余裕があるなら、id:Lhankor_Mhy さんの回答を待ってみるのもアリだと思うんですよね。
＃ 煽っちゃうか :-)
ありがとうございます。（そう言って頂けると安心します）a-kuma3さんの時間を無駄にしないように要件と問題点を明確にしますので、しばらくお待ちください。
2012/02/13 08:09:13