ラベルタグで囲まれたチェックボックスを上寄せ、中央寄せ、下寄せしたい。

Question

###前提・実現したいこと
以下のHTMLで表示されるチェックボックスをラベル内で上寄せ、中央寄せ、下寄せを実現したいです。
※ラベルの高さは可変になります。

<label for="sample_checkbox" style="border:1px solid;border-width:1px;width:170px;height:100px;position:absolute;left:70px;top:585px;">
<div align="right" style="position:relative;top:50%;"><input type="checkbox" id="sample_checkbox" style="vertical-align: middle;" />文字列です</div>
</label>

###試したこと
inputタグをdivで囲み、「style="position:relative;top:XX%;」を指定してみれば上手くいくかと思いましたがダメでした。

jsfiddleで画面が見られるようにしています。
リンク内容

ご助言頂ければ幸いです。
よろしくお願い致します。

Comments

[AKST]

そもそもpositionのabsoluteとrelativeの指定が逆だと思います。。。

[clubman]

すみません。なぜ逆なのでしょうか？

[AKST]

ああ、すみません。label要素自体の位置もabsoluteで指定する必要があるのですね。label内の位置の指定のみかと思ってました。

[gin]

たぶんlabelの中の位置だと思うので「逆」であってます。私の例もrelative→absoluteですし。

Answer 1

いろいろありますけど、一例で。

.test_label {
	display:table-cell;
	width: 170px;
	height:100px;
	border: 1px solid #000;
}
.test_label_top {
	vertical-align: top;
}
.test_label_middle {
	vertical-align: middle;
}
.test_label_bottom {
	vertical-align: bottom;
}

<label class="test_label test_label_top" for="sample_checkbox1"><input type="checkbox" id="sample_checkbox1">文字列です</label>
<label class="test_label test_label_middle" for="sample_checkbox2"><input type="checkbox" id="sample_checkbox2">文字列です</label>
<label class="test_label test_label_bottom" for="sample_checkbox3"><input type="checkbox" id="sample_checkbox3">文字列です</label>

###追記
positionでの例です。

.test_label {
	position: relative;
	display: block;
	width: 170px;
	height: 100px;
	border: 1px solid #000;
}
.test_position {
	position:absolute;
	top: 20px;
}

<label class="test_label" for="sample_checkbox1"><span class="test_position"><input type="checkbox" id="sample_checkbox1">文字列です</span></label>

###追記その2

.test_position {
	position:absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

Comments

[clubman]

ginさま、ご回答ありがとうございます。
示していただいたものを参考に自分のソースを修正してみましたところ、labelタグに「position:absolute」を指定すると上手くいかないようです。
要素の座標をabsoluteで指定する必要があるのですが回避策などありませんでしょうか。。

[gin]

position必須で、位置をtopで調整したいということですか？

[clubman]

はい、その通りです。
開発しているアプリが表示する画面をユーザーが自由にレイアウトを配置できるものでして、XMLに各要素のコンポーネントタイプや座標位置を持っておりそれを元に画面を描画したいのです。

[gin]

ひとまず追記しておきました

[clubman]

追記ありがとうございます。
始めの課題に戻ってしまい恐縮ですが、追記していただいたコードで言うと、「height: 100px;の中央」つまり50pxのところにチェックボックスを配置したいのです。「.test_position」でtop:20pxとなっているところを「.test_label」での中央に配置したいと言うことです。
なので私の最初のコードではlabelタグにposition:absoluteで位置を指定しています。
わかりづらくて申し訳ございません。

[gin]

ではこれで。＜追記その2

[clubman]

お付き合い頂きましてありがとうございます。
提示していただいたコードを微修正することでやりたいことが実現できました。
重ねてお礼を申し上げます。ありがとうございました。

Answer 2

ginさまのご助言で無事解決することができました。
コードを載せておきます。

<label class="test_label" for="sample_checkbox1"><div align="center" class="test_position"><input type="checkbox" id="sample_checkbox1">文字列です</div></label>

.test_label {
    position: absolute;
    left:70px;
    top:585px;
    display: block;
    width: 170px;
    height: 100px;
    border: 1px solid #000;
}

.test_position {
    position:relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}