【お題】NEW演歌

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

締切済

  • 質問者：SUI42
  • 質問日時：
  • 回答数：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><!-- /.home-content -->
</div><!-- /#home -->

</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
    通報する
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： t_fumiaki
  • 回答日時：

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



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

その画像+スペースを空けてnews menu contactの一連のヘッダも中央配置になってますよ。
「テキストを画面の真ん中に配置したいです。」の回答画像2
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2022/11/26 11:37

No.1

  • 回答者： taunamlz
  • 回答日時：

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">
<!--
/*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;
}
-->
</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><!-- /.home-content -->
</div><!-- /#home -->

</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

通報する
お礼日時：2022/11/26 11:41

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

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報