質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

721閲覧

真ん中にうまく配置されない

rara0210

総合スコア18

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/09/25 12:20

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>プログラミング学習</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="header-main"> <h2>30DAYS トライアル</h2> <ul> <div class="header-text"> <li>テイトラとは</li> <li>コース一覧</li> <li>お問い合わせ</li> </div> </ul> </div> </header> <div class="main-img"> <img src="/Users/haruki/デイトラ/img/main-img.png" width="100%"> <div class="main-text"> <h1>1日1題30日で<br>プロのwebエンジニアになろう!</h1> <p>毎日設定された課題をこなすだけ!未経験から<br>30日でプログラミングスキルが身につきます</p> </div> </div> <div class="deitora"> <h1>デイトラとは</h1> </div> <div class=top> <img src="/Users/haruki/デイトラ/img/about.png" width="50%"> <p>デイトラとは、無料で、迷わず、楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身につきます。<br>1日1題30日でプロのwebエンジニアを目指しましょう!</p> </div> <h1 class="coures">コース一覧</h1> <ul class="list-img"> <li><img src="/Users/haruki/デイトラ/img/blue.png"><p>HTML/CSS/Bootstrap</p></li> <li><img src="/Users/haruki/デイトラ/img/green.png"><p>HTML/CSS/Javascript/JQuery</p></li> <li><img src="/Users/haruki/デイトラ/img/pink.png"><p>PHP/WordPress</p></li> </ul> <div class="inquiry"> <h1>問い合わせ</h1> <p>さあ今日から30日間を始めよう!</p>    <form action="#"> <input type="email" name="mail" placeholder="メールアドレス" class="input"> </form> <input type="button" value="無料で始める" class="btn-free">    </div> </body> </html>
header { margin: 0 auto; width: 1000px; } header h2 { float: left; } .header-text li{ padding-right: 30px; padding-top: 10px; float: right; list-style: none; } .main-img { position: relative; } .main-text { position: absolute; width: 100%; left: 0; top: calc(50% - 25px); text-align: center; } .main-text h1 { padding-bottom: 25px; } .deitora { padding-top: 50px; text-align: center; padding-bottom: 30px; } .top { margin: 0 auto; width: 1000px; display: flex; } .top img { padding-right: 10px; } .top p { padding-left: 10px; } .coures { text-align: center; } .list-img { margin: 0 auto; width: 1000px; display: flex; justify-content: space-between; list-style: none; } .list-img > li { width: 32%; } .list-img > li > img { width:100%; } .inquiry { text-align: center; } .inquiry h1 { padding-bottom: 30px; } .input { width: 550px; height: 35px; border-radius: 15px; outline: none; border: 2px solid #CCCCCC; } .btn-free { width: 300px; height: 70px; margin-top: 30px; border-radius: 15px; outline: none; border: none; border-bottom: solid 4px #627295; background-color: #FF8856; color: white; font-size: 25px; font-weight: bold; } .btn-free:active { transform: translateY(4px); border-bottom: none; }

最後の<input type="button" value="無料で始める" class="btn-free">の部分が少し左にずれて表示されます
クラス "inquiry"でdisplay: flex;で真ん中に配置していますが、それが原因でしょうか。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

問題のinputタグの次の行に無駄なスペース(タブ)が入っているのでその行を消せば中央に表示されますよ。
そうした文字に左右されたくない場合は、inputをdisplay:block;にセットしてあげるといいでしょう。

投稿2020/09/25 12:39

geta

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

小要素に displya: inline-block;をいれ親要素に text-align: center;を入れたら解決しました。

投稿2020/09/25 12:38

rara0210

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問