text-alignが適用されない

ロゴクラスの「WCB CAFE]を左に、ページタイトルの「NEWS」を真ん中に置きたい

現在左側の写真の状態です（イメージ図はありません）

以下コードです。```HTML
コード

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>WCB Cafe -NEWS-</title>
    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフード
    を提供するカフェ">

  <!-- CSS -->
    <limk rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link href="https://fonts.googleeapis.com/css?family=Philosopher" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/favicon.png">

  </head>

<body>
  <div id="news" class="big-bg">
    <header class="page-header wrapper">
      <div class="wrapper">
        <h2 class="page-title">News</h2>
      </div><!--/.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>

</body>


  </html>

コード
```
```@charset "UTF-8";

/* 共通部分
------------------------------- */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
    line-height: 1.7;
    color: #432;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

.logo{
  width:210px;
  margin-top: 14px;
  text-align: left;

}

.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-content{
  text-align:center;
  margin-top: 10%;

}

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

}

/* 見出し　*/

.page-title{
  font-size: 5rem;
  font-family: 'Philosopher',serif;
  text-transform: uppercase;
  font-weight: normal;

}

/* ボタン　*/
.button{
  font-size: 1.375rem;
  background:#0bd;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;

}

.button:hover{
  background: #0090aa;
}

.big-bg{
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#home{
  background-image: url(../images/main-bg.jpg);
  background-color: #0bd;
  background-blend-mode: hard-light;
  min-height: 100vh;
  background-image: linear-gradient(#c9ffbf,#ffafbd);
}

#home .page-title{
    text-transform:none;
}

/* NEWS

-------------------------------------------*/

#news{
  background-image: url(../images/news-bg.jpg);
  height: 270px;
  margin-bottom: 40px;
  
}

#news .page-title{
  text-align: center;
}
```
以上です。もしよかったら回答の方よろしくお願いします。

Takumiboo

2020/03/06 06:51

タイトルが「ロゴとニュースの位置が変更されない」とされても、このデザインを知らない人からすれば「？」です。タイトルは適切なものに変更したほうが良いと思います。そして「左に」「真ん中に」と文字で書かれてもどうしたいのかがわからないため、完成イメージ図なりをご用意されたほうが良いと思います。

gori-mutyu

2020/03/06 07:58

わかりました。修正してみます。

行動規範の内容に同意します

回答2件

display: flex; とした header の子アイテムを入れ替えたいということですよね？
CSS でもできますが、HTML を変えたほうがいいのではないでしょうか？

Pug
1header.page-header.wrapper
2  .wrapper
3  h1
4  nav

CSS
1h1 {
2  order: -1;
3}

https://developer.mozilla.org/ja/docs/Web/CSS/order

投稿2020/03/06 08:01

x_x

総合スコア13749

ベストアンサー

なぜh2をwrapperで包む必要があるんでしょうか。
text-alignが利かないのは、そもそもnavとロゴがあるせいで要素が動く範囲が制限されてしまっているからです。絶対配置にすれば解決します。ロゴも同様に絶対配置で左に寄せましょう。

css
1.page-header{
2  display: flex;
3  justify-content: flex-end; /* 変更 */
4}
5
6.wrapper{
7  max-width: 1100px;
8  margin: 0 auto;
9  padding: 0 4%;
10  position: relative; /* 追加 */
11}
12
13/* 以下追加 */
14
15h1 {
16  position: absolute;
17  left: 0;
18}
19h2 {
20  position: absolute;
21  left: 0;
22  right: 0;
23}

html
1<body>
2  <div id="news" class="big-bg">
3    <header class="page-header wrapper">
4      <h2 class="page-title">News</h2>
5      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェ　ホーム"></a></h1>
6      <nav>
7        <ul class="main-nav">
8          <li><a href="news.html">News</a></li>
9          <li><a href="menu.html">Menu</a></li>
10          <li><a href="contact.html">Contact</a></li>
11        <ul>
12      </nav>
13    </header>
14  </div>
15</body>
16