- PR -

[ASP.NET]スタイルシートでのラベルの設定

1
投稿者投稿内容
新人S
ベテラン
会議室デビュー日: 2005/10/12
投稿数: 74
投稿日時: 2005-11-17 18:52
お世話になってます。
今回はスタイルシートの設定について質問させてくださいm(_ _)m

現在スタイルシートで、ラベルに対して設定を行っています。

ラベル上でのテキストの垂直位置を指定したいのですが、
vertical-align:middle;
に設定しても設定がうまく効いてくれません。
水平位置の
text-align:left;
は効いてくれるのですが…。

ラベル上でテキストの垂直位置を中央にもっていきたいのですが
どなたか方法をご存知ないでしょうか？

よろしくお願い致しますm(_ _)m
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2005-11-17 19:21
引用:

新人Sさんの書き込み (2005-11-17 18:52) より:

ラベル上でテキストの垂直位置を中央にもっていきたいのですが
どなたか方法をご存知ないでしょうか？

出来上がった HTML のソースを見て頂くとわかるかと思いますが、
Label といっても、Windows Form の Label コントロールとはわけが違いますからね。

ブロック要素にして、margin を設定するくらいしか思いつきません。

ただ、あるブラウザで中央に位置合わせできたとしても、
別のブラウザでは、違う位置に表示されたりしますので、
私の場合は放置しています。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
ぼのぼの
ぬし
会議室デビュー日: 2004/09/16
投稿数: 544
投稿日時: 2005-11-17 19:22
LabelはHTML上では<span>タグになります。
<span>でvertical-alignが効かないのはHTMLの仕様（いや、ブラウザの仕様かな？）みたいですね。

Labelだけで何とかするなら改行で調節するか絶対配置を使うしかないんじゃないでしょうか。
もしくは<td>など、vertical-alignが効くタグの内側に入れてやる。
ぼのぼの
ぬし
会議室デビュー日: 2004/09/16
投稿数: 544
投稿日時: 2005-11-17 19:30
引用:

じゃんぬねっとさんの書き込み (2005-11-17 19:21) より:
ブロック要素にして、margin を設定するくらいしか思いつきません。

なるほど、その発想がありましたか。試してみたら、IEだと
padding-top:40%;
でそれっぽくなりますね。縦幅全体に占める文字自体の高さによって厳密に中央にはなりませんが。
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2005-11-17 19:36
引用:

ぼのぼのさんの書き込み (2005-11-17 19:22) より:

LabelはHTML上では<span>タグになります。

ああ、これを話しておくべきでしたよね。
Label って表現されると、Windows アプリケーション開発者は、
あの Label コントロールと同じ感覚になってしまうんですよね。

そのためにも、表示された Web ページの HTML ソースを見て、
どの要素に置き換わっているのかなどを見て頂きたいわけですが、
HTML 云々の知識がない方には通用しなくて悩ましいところです。

引用:

<span>でvertical-alignが効かないのはHTMLの仕様（いや、ブラウザの仕様かな？）みたいですね。

本当は、HTML の仕様なんですけどね。(^-^;)
span はインライン要素ですからね。

引用:

なるほど、その発想がありましたか。試してみたら、IEだと
padding-top:40%;
でそれっぽくなりますね。縦幅全体に占める文字自体の高さによって厳密に中央にはなりませんが。

padding だとそうなりますよね。
あとは、親のブロック要素に対して、margin、での調整しかないですよね。

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
新人S
ベテラン
会議室デビュー日: 2005/10/12
投稿数: 74
投稿日時: 2005-11-18 09:55
いつもありがとうございますm(_ _)m

教えていただいた
padding-top
を使ってやってみました。

テキストが真ん中に表示されました！

指摘されたとおりWindowsアプリケーションのラベルの
イメージがあったので、
「なんでこの方法ではだめなんだろう？」
と悩んでいました＾＾；

ありがとうございます。
皆様のおかげでまた１つ問題が解決しましたm(_ _)m
HTMLをもっと勉強しないとだめですね(-_-;
ぼのぼの
ぬし
会議室デビュー日: 2004/09/16
投稿数: 544
投稿日時: 2005-11-18 11:41
引用:

じゃんぬねっとさんの書き込み (2005-11-17 19:36) より:
引用:

<span>でvertical-alignが効かないのはHTMLの仕様（いや、ブラウザの仕様かな？）みたいですね。

本当は、HTML の仕様なんですけどね。(^-^;)
span はインライン要素ですからね。


すみません。ここの記述に関して、モヤモヤが取れないので確認させてください。
この記述だと、「spanはインライン要素だからvertical-alignが効かない」
裏を返すと、「ブロック要素ならvertical-alignが効く」と読み取れるのですが…

http://www.tohoho-web.com/html/memo/elem.htm#blockinline

ここを見ると、確かにspanはインライン要素ですが、Pやdivがブロック要素になってます。
でも、IE6だとPやdivでvertical-alignが効きません。

それから、

http://www.w3.org/TR/1999/REC-CSS1-19990111#vertical-align

ここを見たら、Applies to: inline elementsって書いてあるんですが(^^;

ちょっと混乱してきました。結局、CSSについては仕様を確認するより
実際にサポート対象のブラウザで表示して確認するのが早いんですかね？
じゃんぬねっと
ぬし
会議室デビュー日: 2004/12/22
投稿数: 7811
お住まい・勤務地: 愛知県名古屋市
投稿日時: 2005-11-18 12:41
ご指摘ありがとうございます。
思いっきり勘違いしておりました。(*_ _)

正しくは「align (並ばせる) 基準になる要素がないから vertical-align がきかない」ですね。
IE 限定だと inline-block で以下のことができるため混同して誤解しておりました。

コード:

    <p>
      あああ<span style="display:inline-block; vertical-align:bottom;">ぼのぼのさんマンセー</span>あああ
    </p>

引用:

ここを見たら、Applies to: inline elementsって書いてあるんですが(^^;

インライン要素に適用するですが、反映されるのは以下のような状況の時ということでしょうね...
混乱させてしまって、申し訳ありません。(*_ _)

コード:

    <p>
      <img src="hoge.gif" height="100" width="100">
      <span style="vertical-align:bottom">あああ</span><span style="vertical-align:top">ぼのぼのさんマンセー</span><span style="vertical-align:bottom">あああ</span>
    </p>

_________________
C# と VB.NET の入門サイト
じゃんぬねっと日誌
1

スキルアップ／キャリアアップ（JOB@IT）