人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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;
}?


●質問者: nemutaiyo
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● a-kuma3
●100ポイント

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


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


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


nemutaiyoさんのコメント
a-kuma3さん いつもありがとうございます。(また、いつもとても早い回答助かります)残念ながら幅は固定ではありません。ただし、幅決定後にJavaScriptで動的にspan.nameのwidthを変更すればよいですね。他の回答が無ければ採用させて頂きます。(実現できなくて悩んでいたので大きな光になりました。ありがとうございます!)

a-kuma3さんのコメント
>> 残念ながら幅は固定ではありません。 << 以前の質問だと、文字列の長さに合わせて、という感じだったので、サイズを固定にしたのかな、と思ってしまいました。 もうひとつ、案を考えてみました。

nemutaiyoさんのコメント
以前の質問まで見て頂き感謝です。 >【追記2】 これで実現できてます。ただし、すみません、後だしなのですが、colspanしている箇所があって そこが対応できてません。(jsfiddleに事象を書きますが、明日にさせてください。おそらくcolspan数をかけ算すれば実現できると思います。やってみます。)

a-kuma3さんのコメント
>> 以前の質問まで見て頂き感謝です。 << いや、id:Lhankor_Mhy さんとの掛け合いが楽しかったんで、覚えてるんですわ。 border で矢印を表現する、というのも勉強になったし。 時間に余裕があるなら、id:Lhankor_Mhy さんの回答を待ってみるのもアリだと思うんですよね。 # 煽っちゃうか <tt>:-)</tt>

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

2 ● Cherenkov
●100ポイント

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;
}

Cherenkovさんのコメント
ちょっとpositionの使い方が間違ってるかも。確認中です。

Cherenkovさんのコメント
このへん http://gyauza.egoism.jp/clip/archives/2007/11/071129-tablepositionrelative/

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

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

3 ● Lhankor_Mhy
●100ポイント

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


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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ