text-align ずれる

下のピクチャの、院長・スタッフのところだけtext-align:center;がずれてしまいます。この解決法を知りたいです。

html
1<nav id="introduction">
2      <div class="top-nav child"><a href="">トップページ<br class="english">HOME</a></div>
3      <div class="top-nav child"><a href="">医院紹介<br class="english">CLINIC</a></div>
4      <div class="top-nav child"><a href="">診察案内<br class="english">SERVICE</a></div>
5      <div class="top-nav child "><a href="">院長・スタッフ紹介<br class="english">STAFF</a></div>
6      <div class="top-nav" id="top-nav-last-child"><a href="">アクセス<br class="english">ACCESS</a></div>
7    </nav>
8
9  </div>
10

css
1#introduction{
2  display: flex;
3  margin-top: 30px;
4  width: 100%;
5  border: 2px solid #6cc6c1;
6  border-radius: 5px;
7}
8
9#top-nav-last-child{
10  border-right: none;
11}
12
13.child{
14    border-right:1px solid #595959;
15}
16
17#introduction .top-nav{
18  padding: 20px 50px 20px 50px;
19  background-color: #6CC6C4;
20  width: 20%;
21
22  white-space: nowrap;
23
24}
25
26#introduction .top-nav a{
27  text-decoration: none;
28  color:white;
29  font-size: 13px;
30  font-weight: bold;
31  display: block;
32  text-align: center;
33}
34
35#introduction a:hover{
36  opacity: 0.6;
37}
38

試してみたこと
・text-alignを親要素の.top-navにかけた
・院長・スタッフの部分のdivにだけpaddingなどをかけてみたが変化なし

初心者のためコードが汚いと思われるかもしれませんがよろしくお願いいたします。

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

回答1件

ベストアンサー

おそらく、下記の左右に50pxのpaddingを設定しているのが原因かと。
左右100px + 中のテキストの幅が親要素(.top-nav)の幅を超えるとその分ずれます。

css
1#introduction .top-nav{
2  padding: 20px 50px 20px 50px;
3
4 /*略*/
5}

左右のpaddingは0でも、text-align: center; で中央寄せになるのでいいのでは。

背景色は親要素に設定したほうがいいでしょう。
それも含めて修正したコード例です。

css
1#introduction{
2  display: flex;
3  margin-top: 30px;
4  width: 100%;
5  background-color: #6CC6C4;
6  border-radius: 5px;  
7}
8
9.child{
10  border-right:1px solid #595959;
11}
12#top-nav-last-child{
13  border-right: none;
14}
15
16#introduction .top-nav{
17  padding: 20px 0;
18  width: 20%;
19  overflow: hidden;
20  white-space: nowrap;
21}
22
23#introduction .top-nav a{
24  text-decoration: none;
25  color:white;
26  font-size: 13px;
27  font-weight: bold;
28  display: block;
29  text-align: center;
30}
31
32#introduction a:hover{
33  opacity: 0.6;
34}