テキストを画面の真ん中に配置したいです。

締切済

質問者：SUI42
質問日時：2022/11/25 16:11
回答数：2件

書籍を見つつ、実際にサイトを作る流れを実際に打って覚えよう。みたいな項目をいま行っています。
見出しの文字をcenterできちんと指定しているはずなのですが、反映されていないようです。
元々のcssを消す工程がよくわからず、たぶんちゃんとできてない気がしているのですが、それが関係しているのでしょうか？
HTML↓
<body>
<div id="home" class="big-bg">
<header class="page-header wrapper">
<h1><a href="index.html"><img class="logo" src="images/logo.svg"
alt="WCBカフェホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="news.html">News</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<div class="home-content wrapper">
<h2 class="page-title">We'll Make Your Day</h2>
<p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
<a class="button" href="menu.html">メニューを見る</a>
</div>
</div>

</body>

CSS↓
/*HEADER
----------------------------------*/
.logo{
width: 210px;
margin-top: 14px;
}
.main-nav {
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main-nav li{
margin-left: 36px;
}
.main-nav a{
color: #432;
}
.main-nav a:hover{
color: #0bd;
}
.page-header{
display: flex;
justify-content: space-between;
}
.wrapper{
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;}

/* HOME
------------------------------------------*/
.home-content{
text-align: center;
margin-top: 10px;
}

.home-content p{
font-size: 1.125rem;
margin: 10px 0 42px;
}

書籍をじっくり見返して、ようやく原因突き止めました(-_-;)
CSSのmargin-topの値が、書籍は10％となっているのに、私は１０PXと打っていたようです。
お騒がせしました。ご丁寧に回答していただき、本当にありがとうございました。

補足日時：2022/11/26 11:47
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： t_fumiaki
回答日時：2022/11/25 19:13

チャント、全体が中央配置されてますよ。

見出しの文字ってドレなんですか？
wcbカフェホームの画像の事を言ってますか？

その画像+スペースを空けてnews menu contactの一連のヘッダも中央配置になってますよ。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。見出しというより、メインコンテンツ部分ですね、「We'll　Make　Your Day」など真ん中の部分です
書籍のお手本画像はもう少し下...ページのど真ん中に位置しているようにみえたので、何か反映ができていないのかな...と思い質問させていただきました。
ご確認いただき、ありがとうございました。もう少し
自分で色々いじってみようと思います

通報する

お礼日時：2022/11/26 11:37

No.1

回答者： taunamlz
回答日時：2022/11/25 17:17

cssを適用できていません。

cssを別のファイルに保存するのなら
<link rel="stylesheet" type="text/css" href="xxx.css">
のように、
htmlに埋め込むのなら下のようにする必要があります。

<body>
<div id="home" class="big-bg">
<header class="page-header wrapper">
<style type="text/css">

</style>

<h1><a href="index.html"><img class="logo" src="images/logo.svg"
alt="WCBカフェホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="news.html">News</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<div class="home-content wrapper">
<h2 class="page-title">We'll Make Your Day</h2>
<p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
<a class="button" href="menu.html">メニューを見る</a>
</div>
</div>

</body>

- 0
- 件

通報する

この回答へのお礼

細かくみてくださり、ありがとうございます(´；ω；｀)
一応、HTMLとCSSは分けて、別々のフォルダを作っております。
記載していただいた、変更箇所を一度埋め込んで読み直してみましたが、画面表示自体に変化は見られませんでした。

もう少し考えてみようと思います(-_-;)
ご回答ありがとうございました。

通報する

お礼日時：2022/11/26 11:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！