テキストを中央に配置する方法についてです

css
1.header_logo{
2    margin:10px;
3}
4.display_flex{
5    
6}
7.header_menu_wrap{
8    display:flex;
9    align-items:center;
10}
11
12.header_menu{
13    display:flex;
14    padding:0;
15    height:55px;
16    width:75%;
17
18}
19.header_menu li + li{
20    border-left:1px solid #DDDDDD;
21}
22.header_menu li {
23    height:55px;
24    width:16.666%;
25    margin:10px 0;
26    padding:0 34px;
27    list-style:none;
28    font-family:'Quicksand',sans-serif;
29    text-align:center;
30} 
31
32
33.header_menu li a{
34    text-decoration:none;
35    color:#666;
36    font-size:15px;
37    font-weight:bold;
38
39}
40.header_menu li a:hover{
41  color: #999;
42}
43.header_menu_ruby{
44    color:#999;
45    margin:0;
46    font-size:10px;
47    font-weight:400;
48
49}
50.yoyaku_box{
51    width:18%;
52    
53}
54.yoyaku_box a{
55    text-decoration:none;
56    background-color:#FF9999;
57    color:#fff;
58    padding:14px 45px;
59    position:relative;
60    
61}
62.yoyaku_box a:before{
63    content:"";
64    width:20px;
65    height:20px;
66    background-image:url(img/common_sprite.png);
67    position:absolute;
68    background-size:110px;
69    top:15px;
70    left:17px;
71}
72
73

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>heair_salon</title>
6    <link rel="stylesheet" type="text/css" href="normalize.css" >
7    <link rel="stylesheet" type="text/css" href="heair_salon.css" >
8    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
9</head>
10<body>
11    <header>
12        <div class="header_menu_wrap display_flex">
13            <h1 class="header_logo"><a href="#"><img src="img/header_logo.webp" alt="blandlogo"></h1></a>
14                <ul class="header_menu display_flex" >
15                <li><a href="#">HOME<p class="header_menu_ruby">ホーム</P></a></li>
16                <li><a href="#">SALON<p class="header_menu_ruby">サロン検索</p></a></li>
17                <li><a href="#">SPECIAL<p class="header_menu_ruby">特集コンテンツ</p></a></li>
18                <li><a href="#">CATALOG<p class="header_menu_ruby">ヘアカタログ</p></a></li>
19                <li><a href="#">RECRUIT<p class="header_menu_ruby">採用情報</p></a></li>
20                <li><a href="#">CONCEPT<p class="header_menu_ruby">コンセプト</p></a></li>
21            </ul>
22            <p class="yoyaku_box ">
23                <a href="#">サロンからweb予約</a>
24            </p>
25        </div>
26    </header>
27</body>
28
29</html>

上記コードのul要素のクラス「header_menu」内の「a」要素の中身のアルファベットの文字なのですが、「header_menu」にheightを設定したら、文字は上側に固定されたままでボーダーのみが伸びてる状態になっています。高さを変えても、文字は真ん中に配置したままにしたいのですが、どのようにすればよろしいでしょうか？

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

回答2件

高さを変えても、文字は真ん中に配置したままにしたい

li要素の相対値を計算してそのように配置することも可能ですが、面倒なので、.header_menu liのCSSに**padding-top:20px;**を追加して余白を取るのはどうでしょうか。
※20pxとしたのは適当です。

投稿2018/11/06 13:04

yukapome789

総合スコア361

ベストアンサー

一部CSSを修正しました。
また、HTMLに構造ミスもあったので参考までに修正したものを・・・

display:table-cell
に要素を変更してから
vertical-align:middle;
で縦方向も中央にする方法です

動作サンプル：https://jsfiddle.net/6db4ojkz/2/

CSS
1.header_logo{
2    margin:10px;
3}
4.display_flex{
5
6}
7.header_menu_wrap{
8    display:flex;
9    align-items:center;
10}
11
12.header_menu{
13    display:flex;
14    padding:0;
15    height:55px;
16    width:75%;
17
18}
19.header_menu li + li{
20    border-left:1px solid #DDDDDD;
21}
22.header_menu li {
23    height:55px;
24    width:16.666%;
25    list-style:none;
26    font-family:'Quicksand',sans-serif;
27    
28} 
29
30
31
32.header_menu li a{
33    text-decoration:none;
34    color:#666;
35    font-size:15px;
36    font-weight:bold;
37    display:table-cell;
38    vertical-align:middle;
39    text-align:center;
40    height:55px;
41    width:16.666%;
42}
43.header_menu li a:hover{
44  color: #999;
45}
46
47.header_menu_ruby{
48    color:#999;
49    margin:0;
50    font-size:10px;
51    font-weight:400;
52
53}
54.yoyaku_box{
55    width:18%;
56
57}
58.yoyaku_box a{
59    text-decoration:none;
60    background-color:#FF9999;
61    color:#fff;
62    padding:14px 45px;
63    position:relative;
64
65}
66.yoyaku_box a:before{
67    content:"";
68    width:20px;
69    height:20px;
70    background-image:url(img/common_sprite.png);
71    position:absolute;
72    background-size:110px;
73    top:15px;
74    left:17px;
75}

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="utf-8">
6    <title>heair_salon</title>
7    <link rel="stylesheet" type="text/css" href="normalize.css" >
8    <link rel="stylesheet" type="text/css" href="heair_salon.css" >
9    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
10</head>
11<body>
12    <header>
13        <div class="header_menu_wrap display_flex">
14            <h1 class="header_logo">
15            <a href="#"><img src="img/header_logo.webp" alt="blandlogo">
16            </a></h1>
17            
18                <ul class="header_menu display_flex">
19                <li><a href="#">HOME<p class="header_menu_ruby">ホーム</p></a></li>
20                <li><a href="#">SALON<p class="header_menu_ruby">サロン検索</p></a></li>
21                <li><a href="#">SPECIAL<p class="header_menu_ruby">特集コンテンツ</p></a></li>
22                <li><a href="#">CATALOG<p class="header_menu_ruby">ヘアカタログ</p></a></li>
23                <li><a href="#">RECRUIT<p class="header_menu_ruby">採用情報</p></a></li>
24                <li><a href="#">CONCEPT<p class="header_menu_ruby">コンセプト</p></a></li>
25               </ul>
26            <p class="yoyaku_box ">
27                <a href="#">サロンからweb予約</a>
28            </p>
29        </div>
30    </header>
31</body>
32
33</html>

投稿2018/11/06 13:22

編集2018/11/06 13:23

8yazaki

総合スコア454

newyee

2018/11/07 05:50

ご回答いただきありがとうございます。「header_menu li 」のmargin、paddingを取り除く、「header_menu li a 」にdisplay:tabel_cellを追加し、vertical-align:middleを設定したのですが、変化がありませんでした。他に修正された場所が分からなかった為、どこを修正されたか教えて頂いてもよろしいでしょうか？

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

あなたの回答