文字を縦の中央揃えにしたい

中央タイトル「LAMINA」の文字サイズの真ん中をベースラインとして再度のリストを縦中央に揃えたいのですが上手く反映されません。
vertical-alignを利用してみましたが反映されませんでした。

＜イメージ図＞

＜今の現状＞

bootstrap使ってます。

html
1<header class="mt-3">
2    <ul class="list-inline header-list m-0">
3      <li class="list-inline-item"><a href="#">NEW IN</a></li>
4      <li class="list-inline-item"><a href="#">COLLECTION</a></li>
5      <li class="list-inline-item"><a href="#">LOOKBOOK</a></li>
6      <li class="list-inline-item align-baseline"><h1 class="align-baseline m-0">LAMINA</h1></li>
7      <li class="list-inline-item"><a href="#">OUR STORY</a></li>
8      <li class="list-inline-item"><a href="#">NEWS</a></li>
9      <li class="list-inline-item"><a href="#">STORES</a></li>
10    </ul>
11  </header>

css
1.header-list{
2  text-align: center;
3  font-family: Bodoni URW;
4  line-height: 80px;
5}
6
7.header-list li {
8  padding: 0 2%;
9}
10
11.header-list li a{
12  color: black;
13  display: inline-block;
14}
15
16.header-list h1{
17  display: inline-block;
18}
19
20.list-inline-item:not(:last-child) {
21  margin-right: 0;
22}

kei344

2020/06/07 12:10

他のCSSも提示してください。

hase_

2020/06/07 12:39

今全てのCSSを提示しました。

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

回答1件

ベストアンサー

inlineで並べるならこんな感じかな。

CSS
1.header-list{
2  text-align: center;
3  font-family: Bodoni URW;
4  /*line-height: 80px;*/
5}
6
7.header-list li {
8  padding: 0 2%;
9  vertical-align: bottom;/* ADD */
10}
11
12.header-list li a{
13  color: black;
14  display: inline-block;
15  padding: .75em 0;/* ADD */
16}
17```**動くサンプル：**[https://jsfiddle.net/kfcr0ahz/](https://jsfiddle.net/kfcr0ahz/)