Q&A
前提
HTML/CSSを学習中です。
現在、実践演習中で模写コーディングを行っています。
↓イメージの様なLPを目指しています。
###実現したいこと
↓イメージの赤枠で囲まれた部分の様に、
左：画像、右：テキスト を配置しつつ、
左画像、右テキストを共に中央に寄せて配置したいのですが、画像が左寄せになってしまいます。
解決策の回答をお願いします。
######本来指定したい状態 ※赤枠部
######現在の誤りのある状態 ※赤枠部
※左に配置した画像の中央寄せが適用されていない
補足情報（FW/ツールのバージョンなど）
使用機器：Dynabook 15インチ
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>デイトラ/copy</title> 7 <link rel="stylesheet" href="stylesheet.css"> 8 9</head> 10<body> 11 <header> 12 <div class="container"> 13 <div class="header-left"> 14 <h2>30DAYSトライアル</h2> 15 </div> 16 <div class="header-right"> 17 <a href="#">デイトラとは</a> 18 <a href="#">コース一覧</a> 19 <a href="#">お問い合わせ</a> 20 </div> 21 </div> 22 </header> 23 <div class="main"> 24 <div class="container"> 25 <h1>1日1題30日で<br>プロのWebエンジニアになろう！</h1> 26 <p>毎日指定された課題をこなすだけ！未経験から<br>30日でプログラミングスキルが身に付きます</p> 27 </div> 28 </div> 29 <div class="about-wrap"> 30 <div class="container"> 31 <div class="heading"> 32 <h1>デイトラとは</h1> 33 </div> 34 <div class="about"> 35 <div class="box"> 36 <img src="img/about.png" > 37 <div class="right"> 38 <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう！ 39 </p> 40 </div> 41 </div> 42 43 <!-- デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう！ --> 44 45 </div> 46 </div> 47 </div> 48 </div> 49 </div> 50 <div class="service"></div> 51 <div class="contact"></div> 52 <footer></footer> 53</body> 54</html>
css
1* { 2 color: navy; 3 text-decoration: none; 4 box-sizing: border-box; 5} 6 7div { 8 display: block; 9} 10header { 11 height: 65px; 12 width: 100%; 13 background-color: white; 14 position: fixed; 15 top: 0; 16 z-index: 10; 17} 18.header-left { 19 float: left; 20 margin-left: 200px; 21} 22.header-right { 23 float: right; 24 margin-right: 200px; 25} 26.header-right a { 27 line-height: 65px; 28 padding: 0 25px; 29 /* color: white; */ 30 display: block; 31 float: left; 32 transition: all 0.5s; 33} 34 35.main h1 { 36 /* opacity: 0.7; */ 37 font-size: 45px; 38 /* letter-spacing: 5px; */ 39} 40h1 { 41 display: block; 42 font-size: 2em; 43 margin-block-start: 0.67em; 44 margin-block-end: 0.67em; 45 margin-inline-start: 0px; 46 margin-inline-end: 0px; 47 font-weight: bold; 48} 49.main { 50 padding: 180px 0 100px 0; 51 background-image: url(img/main-vsual-nontitle.png); 52 /* color: white; */ 53 background-size: cover; 54 text-align: center; 55} 56.about-section { 57 float: left; 58} 59.heading { 60 padding-top: 30px; 61 padding-bottom: 30px; 62 text-align: center; 63} 64 65.about { 66 text-align: center 67} 68.box { 69 margin: 10px 0; 70 float: left; 71 width: 100%; 72 73} 74.box img { 75 max-width: 40%; 76 float: left; 77} 78.box p { 79 margin: 0; 80 padding: 10px; 81} 82.right { 83 width: 60%; 84 float: left; 85}
回答1件
0
ベストアンサー
こんにちは。
以下を追加するとどうですか？
css
1.box { 2 display: flex; 3 justify-content: center; 4} 5
投稿2020/12/07 05:35
総合スコア36928
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/07 06:02
2020/12/07 06:05
2020/12/07 06:09 編集
2020/12/07 07:11
2020/12/07 07:21
2020/12/07 08:10
2020/12/07 12:20
2020/12/07 13:15
2020/12/07 17:26 編集
2020/12/08 02:32
2020/12/08 02:44