【HTML/CSS】ラジオボックスを中央に配置して縦並びにしたいです

前提・実現したいこと

HTML/CSS初心者です。
②のラジオボタンを①のテキストフィールドと同じ位置で中央に配置してラジオボタン（東京、東京以外）を縦並びにしたいです。
どなたか教えてください。

該当のソースコード

ソースコード
【HTML】

【CSS】
.contact{
width:1000px;
margin:0 auto;
padding: 100px;}

label{
margin-right:350px;
width:150px;
}

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

回答2件

ベストアンサー

横並びにしたいならdisplay: flex;を使うのがよいかと思います。

HTML
1<form>
2  <div class ="contact">
3    <div class="titleBlock">
4      <label>①名前</label>
5    </div>
6    <div class="inputBlock">
7      <input type="text">
8    </div>
9  </div>
10</form>
11
12<form>
13  <div class ="contact">
14    <div class="titleBlock">
15      <label>②出身地</label>
16    </div>
17    <div class="inputBlock">
18      <input type ="radio" name ="place" value ="tokyo">東京<br>
19      <input type ="radio" name ="place" value ="other">東京以外
20    </div>
21  </div>
22</form>

CSS
1.contact{
2  width: 1000px;
3  margin: 0 auto;
4  display: flex;
5}
6
7.titleBlock {
8  width: 300px;
9}

投稿2021/07/20 02:53

agumon

総合スコア271

chrome/IE/Edgeで確認しましたが
記載されたような画面にはなりませんでした。
添付間違えてはいないでしょうか？

投稿2021/07/19 23:24

momotuwo

総合スコア155

lovesoccer

2021/07/20 02:22 編集

【HTML】 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel ="stylesheet" type="text/css" href ="NewFile.css"> </head> <body> <form> <div class ="contact"> <label>①名前</label> <input type="text"> </div> </form> <form> <div class ="contact"> <label>②出身地</label><br> <input type ="radio" name ="place" value ="tokyo">東京 <input type ="radio" name ="place" value ="other">東京以外 </div> </form> </body> </html> 【CSS】【ファイル名：NewFile.css】 @charset "UTF-8"; .contact{ width:1000px; margin:0 auto; padding: 100px;} label{ margin-right:350px; width:150px; } こちらのコードになります。添付いたしました通りになるのですがならないでしょうか。