ヘッダーのレイアウトを整えたい

ヘッダーの帯を作っているのですが、写真の位置からタイトルの位置は変えず、name,listと新規登録、ログアウトの文字の感覚をすこし離したいのですがどうしたらいいでしょうか？navbarの子要素、nameなどにmarginやpaddingをかけてみたのですが、中央のtitleもずれてしまいます。中央のtitleを固定するやり方などあれば教えていただきたいです。

html
1 <body>
2    <header>
3      <div class="navbar">
4        <div class="name">name</div>
5        <div class="list">list</div>
6      </div>
7      <div class="title">title</div>
8      <div class="rog">
9        <div class="new">新規登録</div>
10        <div class="rog-out">ログアウト</div>
11      </div>
12    </header>
13  </body>

SCC
1header{
2  width: 100%;
3  background-color: lightskyblue;
4  height: 100px;
5  display: flex;
6  justify-content: space-between;
7  align-items: center;
8  font-size: 30px;
9}
10
11.navbar{
12  display: flex;
13
14}
15.rog{
16  display: flex;
17}

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

回答1件

ベストアンサー

margin-leftというのがあるので、参考にしてみてください。
http://www.dolceproof.jp/topic/reference/referencecss/margin-left

投稿2020/10/06 11:40

firegrape

総合スコア902

kdh

2020/10/06 12:33

ありがとうございます！magin-leftも試したのですが中央のtitleも一緒に動いてしまいます.... titleを固定するやり方などありますでしょうか？

firegrape

2020/10/06 12:40

この場合で言うと、 listとログアウトにだけmargin-leftやってみてください。こんな感じです。 <div class="list" style="margin-left : 10px">list</div> <div class="rog-out" style="margin-left : 10px">ログアウト</div>

kdh

2020/10/06 12:44

なるほど！いい感じになりました！パズルゲームみたいな感覚ですね笑ありがとうございます！！

kdh

2020/10/06 19:20

すみません。質問なのですが、仮にログインしたときに新規登録という文字が消えた場合、それに合わせてtitleの文字の位置も変わってしまうのですが、それでも真ん中のtitleだけ変えない方法ってありますか？

firegrape

2020/10/06 22:46

<div class="title">title</div> これを <div class="title" align="center">title</div> このように変更したらどうなりますか。

kdh

2020/10/07 03:50

実際のtitleはa要素なんです。。左右されないかなと思って書いていなかったです。中央のtitleがリンクになっていてそれを中央寄せしたい感じです。 <div class="title" align="center">title</div>も試しましたがうまくいきませんでした。。。