tableの中を上下中央寄せにしたい

tdの中にテキスト・ラジオボタン・テキストエリアを入れた状態で、
上下中央寄せにしたいのですが、上手くできません。

どのようにすれば良いかご教示お願いいたします。

HTML
1<table>
2	<tr>
3		<td>
4			<label for="hoge">テキスト<input type="radio" name="hoge" value="17" id="hoge"></label>
5			<textarea name="hoge" class="textarea" cols="10" rows=""></textarea>
6		</td>
7	</tr>
8</table>

CSS
1td { padding: 10px 40px; border: 1px black solid; text-align: center; vertical-align: middle; }

以下のようになっています。

m.ts10806

2019/05/14 04:44

今どうなってますか？画面キャプチャをご提示ください。また、vertical-alignがtopになっていますが、これはどういう意図で入れていますか？

scoa

2019/05/14 05:13

画像キャプチャを追加しました。vertical-align:top;はミスです。正しくはmiddleです。ご指摘ありがとうございます。

行動規範の内容に同意します

回答2件

ベストアンサー

tdのvertical-align: top;は意味がないので削除。
textareaにvertical-align: middle;追加が正解です。

CSS
1td {
2  padding: 10px 40px;
3  border: 1px black solid;
4  text-align: center;
5}
6
7td textarea {
8  vertical-align: middle;
9}

投稿2019/05/14 05:00

yasutomi

総合スコア2937

scoa

2019/05/14 05:15

ありがとうございます。実現できました。大変恐縮ですが、textareaにvertical-align: middle;追加で上手くいくのはなぜでしょうか。

yasutomi

2019/05/14 05:16

こちらをご参照ください。 http://www.htmq.com/style/vertical-align.shtml

scoa

2019/05/14 05:21

理解しました。ありがとうございます。

退会済みユーザー

2019/05/14 05:30

「vertical-align」が使用できる要素、「text-align」が使用できる要素がそれぞれ決められています。 textareaは、インライン要素なので、「vertical-align」が使えます。「ブロックレベル要素」と「インライン要素」について頭の片隅に置いておくと、今回のような「CSSが思い通りにいかない時」に役に立ちますよ。

行動規範の内容に同意します

css
1td { 
2  display: flex;
3  padding: 10px 40px; 
4  border: 1px black solid; 
5  align-items: center;
6}

display:flexをつかいましょー
参考URL

追記

td横並びにしたいっていう質問者さんからのごよーぼーにお答えするとなると↓みたいになるんじゃないでしょーかねー

css
1td { 
2  display: flex;
3  padding: 10px 40px; 
4  border: 1px black solid; 
5  align-items: center;
6}  
7tr { 
8  display: flex;
9  padding: 10px 40px; 
10  border: 1px black solid; 
11  align-items: center;
12}