CSSで矢印を描画する時に文字列を中央に置きたいです。方法を教えてください。

以下サイトの場合「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;
}​

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/02/12 23:48:10
  • 終了:2012/02/19 23:50:22

回答(3件)

id:a-kuma3 No.1

a-kuma3回答回数4366ベストアンサー獲得回数18022012/02/13 00:10:17

ポイント100pt

td 要素の幅が 200px だということを前提にしてますが、以下のような感じではどうですか?
http://jsfiddle.net/NqLuX/2/


【追記】
サイズを前提にするなら、矢印の分を padding に指定すれば良いのに気がつきました。
http://jsfiddle.net/NqLuX/17/


【追記2】
td のサイズ指定を外して、内側の padding で調整するようにしてみました。
http://jsfiddle.net/NqLuX/29/

他3件のコメントを見る
id:a-kuma3

以前の質問まで見て頂き感謝です。

いや、id:Lhankor_Mhy さんとの掛け合いが楽しかったんで、覚えてるんですわ。
border で矢印を表現する、というのも勉強になったし。

時間に余裕があるなら、id:Lhankor_Mhy さんの回答を待ってみるのもアリだと思うんですよね。
# 煽っちゃうか :-)

2012/02/13 00:58:17
id:nemutaiyo

ありがとうございます。(そう言って頂けると安心します)a-kuma3さんの時間を無駄にしないように要件と問題点を明確にしますので、しばらくお待ちください。

2012/02/13 08:09:13
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/02/13 00:13:34

ポイント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;
}
他2件のコメントを見る
id:nemutaiyo

おお!試しました。-65pxだと幅が可変なので対応できないかと思い、試しに-50%としたら中央あたりに表示しました。これでお客さん納得してくれそう。聞いてみます。ありがとうございます!

2012/02/13 00:32:11
id:nemutaiyo

あ、でも問題が... colspanとかしているところがズレます。文章では伝えにくいのでまたjsfiddleに書きます。ですが すみません。今日は寝ます。よければまた見て頂けると幸いです。

2012/02/13 00:38:12
id:Lhankor_Mhy No.3

Lhankor_Mhy回答回数775ベストアンサー獲得回数2302012/02/13 09:56:18

ポイント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で未テストです。大丈夫だと思うのですがうまく表示されない場合はご容赦下さい。

id:nemutaiyo

Lhankor_Mhyさん。いつもありがとうございます。Lhankor_Mhyさんのコードを採用させて頂きます。後で書きますが、ある条件の時レイアウトが崩れるパターンがありまして、もし良かったらそちらも見てください。jsfiddleに書きます。

2012/02/15 11:50:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません