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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

中央配置がうまくできない

wkou4627
wkou4627

総合スコア9

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0グッド

0クリップ

162閲覧

投稿2022/11/26 02:10

編集2022/11/26 23:48

前提

プログラミングを初めて数日です。

htmlとcssで簡単なホームページを作成しています。
以下のことが調べてもわからず、質問させて頂きました。

About/News /Contactのコンテンツが左寄せになってしまい、中央に配置することができません。

実現したいこと

以下の【About/News/Contact】の状態を
イメージ説明

イメージ説明

このようにしたいです。
イメージ説明

イメージ説明

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>My Work</title> 9 <meta name="description" content="text text texte"> 10 <link rel="stylesheet" href="./assets/css/sanitize.css"> 11 <link rel="stylesheet" href="./assets/css/style.css"> 12</head> 13 14<body> 15 16/* <header></header>/* 17 18 19 <section> 20 <div class="section"> 21 <h1 class="section-about"> 22 <a id="about">About</a> 23 </h1> 24 <p class="foo">Xxxx Ashley</p> 25 <address class="about-address">2th Floor Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</address> 26 <ul class="about-description"> 27 <li>tel:000-0000-0000</li> 28 <li>www.xxxxxxx.jp</li> 29 <li>mail:xxx@xxxxx.jp</li> 30 </ul> 31 32 <p class="profile-description">プロフィールtext text text text text text text text text <br/> 33 text text text text text text text texttext text text text text text text text <br/> 34 text text text text text text text texttext text text text text text text text <br/> 35 </p> 36 </div> 37 </section> 38 39 <section> 40 <div class="news"> 41 <h1 class="news-title"> 42 <a id="news">News</a> 43 </h1> 44 <dl> 45 <dt>2020.XX.XX</dt> 46 <dd>デザイン雑誌「XXXXXX Vol.11」に掲載していただきました。</dd> 47 48 <dt>2020.XX.XX</dt> 49 <dd>デザイン雑誌「XXXXXX Vol.11」に掲載していただきました。</dd> 50 51 <dt>2019.XX.XX</dt> 52 <dd>デザイン雑誌「XXXXXX Vol.11」に掲載していただきました。</dd> 53 54 <dt>2019.XX.XX</dt> 55 <dd>デザイン雑誌「XXXXXX Vol.11」に掲載していただきました。</dd> 56 57 <dt>2019.XX.XX</dt> 58 <dd>デザイン雑誌「XXXXXX Vol.11」に掲載していただきました。</dd> 59 </dl> 60 61 </div> 62 </section> 63 64 <section class="contact"> 65 <h1 class="contact-title"> 66 <a id="contact">Contact</a> 67 </h1> 68 <form classs="form" action=""> 69 70 <table class="form-table"> 71 72 <tr> 73 <td> 74 <label for="name">NAME</label> 75 </td> 76 <td> 77 <input class="input" type="text" id="name"> 78 </td> 79 </tr> 80 81 <tr> 82 <td> 83 <label for="email">E-mail</label> 84 </td> 85 <td> 86 <input class="input" type="email" id="email"> 87 </td> 88 </tr> 89 90 <tr> 91 <td> 92 <label for="message">MESSAGE</label> 93 </td> 94 <td> 95 <textarea class="textarea" id="message" cols="30" rows="10"></textarea> 96 </td> 97 </tr> 98 </table> 99 100 <div class="form-button"> 101 <button class="button.button-submission" type="submit">送信</button> 102 </div> 103 </form> 104 </section> 105 106 /*<footer></footer>*/ 107</body> 108</html>

CSS

1/* 2about 3*/ 4/*.section {}*/ 5.section-about { 6 font-size: 30px; 7 font: bold; 8 margin-bottom: 60px; 9 text-align: center; 10} 11.foo { 12 padding-left: 40px; 13 } 14.about-address { 15 padding-left: 40px; 16} 17.about-description { 18 list-style-type: none; 19 padding-left: 40px; 20} 21.profile-description { 22 padding-left: 40px; 23} 24 25/* 26News 27*/ 28 29.news { 30 margin: 0 auto; 31} 32.news-title { 33 font-size: 30px; 34 font: bold; 35 text-align: center; 36 margin-top: 50px; 37 margin-bottom: 60px; 38} 39dt, dd { 40 margin: 0; 41 padding: 0; 42} 43 44dl { 45 display: flex; 46 border-top: solid 1px #c8c8c8; 47 flex-wrap: wrap; 48 margin-bottom: 20px; 49} 50 51dt { 52 width: 20%; 53 border-bottom: solid 1px #c8c8c8; 54 padding-top: 15px; 55 padding-bottom: 15px; 56 } 57 58dd { 59 width: 80%; 60 border-bottom: solid 1px #c8c8c8; 61 padding-top: 15px; 62 padding-bottom: 15px; 63 } 64 65/* 66Contact 67*/ 68 69.contact { 70 text-align: center; 71} 72 73.contact-title { 74 font-size: 30px; 75 font: bold; 76 text-align: center; 77 margin-top: 50px; 78 margin-bottom: 60px; 79 80} 81/*.form { }*/ 82.form-table { 83 padding-left: 40px; 84 text-align: left; 85 font-size: 16px; 86} 87.input { 88 padding: 10px; 89 border: 1px solid #ccc; 90 min-width: 600px; 91} 92 93.textarea { 94 padding: 10px; 95 border: 1px solid #ccc; 96 min-width: 600px; 97 max-width: 600px; 98 min-height: 100px; 99} 100.form-button { 101 margin-top: 40px; 102 margin-bottom: 130px; 103} 104 105/*.button.button-submission {}*/ 106

試したこと

各セレクタに、以下のコードを入力と消去を繰り返しどのように変化するかを試しました。

①margin: 0 auto;
②text-align: center;
③margin-left: auto;
margin-right: auto;
width: 8em;
④display: flex;

どれも効きません。
どうしたらいいでしょうか。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

luuguas

2022/11/26 04:08

CSSだけではページの構造がわからないので、HTMLのコードも記載してください。
wkou4627

2022/11/26 23:50

追記致しました。初歩的なことを教えてくださり、ありがとうございます。

回答1

0

自己解決

.section{}/.news{}/.contact{} に 

margin:0 auto 130px auto;
padding: 0 4%;

を追加したところ解決できました。
ありがとうございました。

投稿2022/11/27 06:17

wkou4627

総合スコア9

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。