テキストボックスはそのままで<label>タグに「名前」「性別」部分のみ左寄せにしたいです。

上記にあるように、テキストボックスは中央揃えにしているのでそのままで、
テキストボックス上にある「名前」「性別」部のみ左寄席せにしたいです。

分かる方お力添え頂けませんでしょうか。

よろしくお願い致します。

html
1<div class="profile-inner flex">
2    <h3 class="profile-tll flex">プロフィール変更</h2>
3
4        <div class="profile-img-inner flex">
5            <img class="profile-img" src="img\デフォルト画像.jpg" alt="プロフィール画像">
6            <a class="profile-txt" href="#">プロフィール画像を変更する</a>
7        </div>
8        <hr class="separate">
9        <div class="profile-items flex">
10            <div class="profile-contens flex">
11                <label>名前</label>
12                <input type="text" class="profile-item" v-model="name">
13            </div>
14            <div class="profile-contens flex">
15                <label>性別</label>
16                <input type="text" class="profile-item" v-model="sex">
17            </div>
18        </div>
19</div>

css
1.flex {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7a{
8  text-decoration: none;
9}
10
11label{
12  font-size: 0.6rem;
13  text-align: start;
14}
15
16.profile-inner {
17  width: 100%;
18  flex-direction: column;
19}
20
21.profile-tll {
22  width: 80%;
23  font-size: 1rem;
24  padding-top: 1rem;
25}
26
27.profile-img-inner {
28  flex-direction: column;
29}
30
31.profile-img {
32  width: 100px;
33  height: 100px;
34  border-radius: 50% 50%;
35}
36
37.profile-txt{
38  font-size: 0.6rem;
39  padding: 1rem;
40}
41
42hr.separate {
43  width: 80%;
44  display: block;
45  height: 0;
46  border: 0;
47  border-top: 1px solid #ddd;
48  margin: 2rem 0;
49  padding: 0;
50}
51
52.profile-items{
53  flex-direction: column;
54}
55
56.profile-contens{
57  display: flex;
58  justify-content: flex-start;
59  flex-direction: column;
60  margin: 0.5rem;
61}

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

回答1件

ベストアンサー

変更した点
・名前のところの、<div class="profile-contens flex">を<div class="profile-contens ">に変更

・同様に性別のところの、<div class="profile-contens flex">を<div class="profile-contens ">に変更

他の位置をずらさず、名前と性別だけ移動できていると思います。
如何でしょうか？

html

html
1<head>
2	<link rel="stylesheet" href="style.css">
3	<meta http-equiv="content-type" charset="utf-8">
4</head>
5<body>
6
7<div class="profile-inner flex">
8    <h3 class="profile-tll flex">プロフィール変更</h3>
9
10        <div class="profile-img-inner flex">
11            <img class="profile-img" src="img\デフォルト画像.jpg" alt="プロフィール画像">
12            <a class="profile-txt" href="#">プロフィール画像を変更する</a>
13        </div>
14        <hr class="separate">
15        <div class="profile-items flex">
16            <div class="profile-contens ">
17                <label>名前</label>
18                <input type="text" class="profile-item" v-model="name">
19            </div>
20            <div class="profile-contens">
21                <label>性別</label>
22                <input type="text" class="profile-item" v-model="sex">
23            </div>
24        </div>
25</div>
26</body>
27

css

css
1.flex {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7a{
8  text-decoration: none;
9}
10
11label{
12  font-size: 0.6rem;
13  text-align: start;
14}
15
16.profile-inner {
17  width: 100%;
18  flex-direction: column;
19}
20
21.profile-tll {
22  width: 80%;
23  font-size: 1rem;
24  padding-top: 1rem;
25}
26
27.profile-img-inner {
28  flex-direction: column;
29}
30
31.profile-img {
32  width: 100px;
33  height: 100px;
34  border-radius: 50% 50%;
35}
36
37.profile-txt{
38  font-size: 0.6rem;
39  padding: 1rem;
40}
41
42hr.separate {
43  width: 80%;
44  display: block;
45  height: 0;
46  border: 0;
47  border-top: 1px solid #ddd;
48  margin: 2rem 0;
49  padding: 0;
50}
51
52.profile-items{
53  flex-direction: column;
54}
55
56.profile-contens{
57  display: flex;
58  justify-content: flex-start;
59  flex-direction: column;
60  margin: 0.5rem;
61}