flexboxで横並びにした画像とテキストを真ん中寄せにしたい

flexboxで横並びにした画像とテキストを真ん中寄せにしたいです。
プログラミング初心者です。調べましたが、自力で答えを見つけられませんでした。
下記のボックス自体を中央に寄せたいのですが、できません。
また、テキスト自体も一文ずつ改行して紫のボックス内で中央によせたいのですが、これは.textタグ全てにdisplay:flexが適用されているということでしょうか？

現状

理想

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="css/style.css" type="text/css">
8    <link rel="stylesheet" href="css/style.css" media="screen">
9    <title></title>
10</head>
11
12
13<body>
14    <header>
15        <div class="contena">
16            <a class="logo" href="#"><img class="header-icon" src="img/sikaku.svg" alt="四角"></a>
17            <nav>
18                <ul>
19                    <li><a href="#">top</a></li>
20                    <li><a href="#">about</a></li>
21                    <li><a href="#">folio</a></li>
22                    <li><a href="#">contact</a></li>
23                </ul>
24            </nav>
25        </div>
26    </header>
27
28<!-- ここから自己紹介文のはじまり -->
29
30    <div class="main">
31
32        <p class="jikoshoukai">自己紹介</p>
33        <hr>
34        <p class="kokodesukosi">ここで少し、お話をさせてください。</p>
35
36        <div class="aboutme-box">
37
38            <p class="aboutme">about me.</p>
39
40        </div>
41
42
43    </div>
44
45    <!-- ここまで自己紹介文 -->
46    
47    <!-- ここから写真部分 -->
48
49    <div class="flex">
50        <img class="shasin" src="img/girl.jpg" alt="写真">
51
52        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
53
54
55
56
57
58
59    </div>
60
61
62
63
64
65
66    <footer>
67
68    </footer>
69
70
71
72</body>
73
74</html>

CSS
1
2@charset "UTF-8";
3
4/* ========================================
5	    リセットcss
6	========================================= */
7	html, body, div, span, applet, object, iframe,
8	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9	a, abbr, acronym, address, big, cite, code,
10	del, dfn, em, img, ins, kbd, q, s, samp,
11	small, strike, strong, sub, sup, tt, var,
12	b, u, i, center,
13	dl, dt, dd, ol, ul, li,
14	fieldset, form, label, legend,
15	table, caption, tbody, tfoot, thead, tr, th, td,
16	article, aside, canvas, details, embed,
17	figure, figcaption, footer, header, hgroup,
18	menu, nav, output, ruby, section, summary,
19	time, mark, audio, video {
20		margin: 0;
21		padding: 0;
22		border: 0;
23		font-style:normal;
24		font-weight: normal;
25		font-size: 100%;
26		vertical-align: baseline;
27	}
28	article, aside, details, figcaption, figure,
29	footer, header, hgroup, menu, nav, section {
30		display: block;
31	}
32	html{overflow-y: scroll;}
33	blockquote, q {quotes: none;}
34	blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
35	input, textarea,{margin: 0; padding: 0;}
36	ol, ul{list-style:none;}
37	table{border-collapse: collapse; border-spacing:0;}
38	caption, th{text-align: left;}
39    a:focus {outline:none;}
40
41
42	/* ========================================
43		共通
44	========================================= */
45    
46    body{
47		font-family: 'TsukuARdGothic-Regular',sans-serif;
48		color: #000000;
49		margin: 0;
50		padding: 10px;
51
52	}
53	
54	html {
55		font-size: 62.5%;
56	  }
57
58	a{
59		text-decoration: none;
60	}
61    
62
63
64	/* ========================================
65		ヘッダー
66	========================================= */
67
68	header{
69		background-color: #3f3f3f;
70		height: 40px;
71		width: 100%;
72	}
73	.header-icon{
74		width: 30px;
75		height: 30px;
76		margin-left: 30px;
77		align-items: center;
78	}
79
80	.logo{
81		margin-top: 5px;
82		/* ヘッダーロゴの上にスペース */
83		margin-left: 75px;
84	}
85
86
87	.contena{
88		display: flex;
89		display:flex;align-items: center;
90	}
91	
92	nav{
93		margin-left: auto;
94	}
95
96	nav ul {
97		display: flex;
98		margin-right: 80px;
99	}
100	  
101	nav ul li{
102		margin-left: 40px;
103		font-size: 1.4rem;
104		letter-spacing: 3px;
105	}
106
107	nav ul li a{
108		color: rgb(255, 255, 255)
109	}
110
111
112
113    /* ========================================
114            メインコンテンツ
115	========================================= */
116		
117	.main{
118		margin-top: 200px;
119	}
120    .jikoshoukai{
121        font-size: 3.2rem;
122        text-align: center;
123        letter-spacing: 1.5rem;
124    }
125
126    hr{
127        width: 46%;
128        margin-top: 3rem;
129        margin-bottom: 3rem;
130    }
131
132    .kokodesukosi{
133        font-size: 1.4rem;
134        text-align: center;
135        letter-spacing: 0.5rem;
136    }
137
138    .aboutme-box{
139        text-align: center;
140    }
141
142    .aboutme{
143        font-size: 1.3rem;
144        border: 1px solid #000;
145        display: inline-block;
146        padding: 1.5rem 4.3rem;
147        margin-top: 4.5rem;
148        letter-spacing: 0.3rem;
149	}
150	
151
152	  /* ========================================
153            写真の部分の装飾
154	========================================= */
155
156	.flex{
157		display: flex;
158		width: 80%;
159		margin: 100px auto;
160	}
161
162	.text{
163		background-color: #8a67ac;
164	}
165	.shasin{
166		width: 20%;
167		
168	}
169	
170
171  /* ========================================
172            レスポンシブ対応
173	========================================= */
174
175	@media screen and (max-width: 479px) { /*ウィンドウ幅が最大479pxまでの場合に適用*/
176	body{
177	background-color: #00FF00; /*緑色*/
178	width: 100%;
179	}
180	
181
182
183
184
185	}

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

回答1件

ベストアンサー

画像を見た感じで適当に作成してみました。いかがでしょうか。

css
1
2/* ========================================
3写真の部分の装飾
4========================================= */
5
6.flex{
7  display: flex;
8  align-items: center; /* 上下中央寄せ */
9  width: 80%;
10  margin: 100px auto;
11}
12
13.text{
14/*  background-color: #8a67ac; */
15  width: 70%;
16  padding-left: 20%;  /* 画像とテキスト間の余白 */
17  text-align: center; /* テキスト中央寄せ */
18  font-size: 1.5vw;   /* テキストは画面幅に応じて拡縮するようにしてみました */
19}
20.shasin{
21  width: 30%;
22}