72146


下記に該当箇所を抜き出します。  
こちらのクラスtabBtn内のタブ１～５までの文字を縦位置中央にする方法をご教授ください

**HTML**

[code]

    <!-- ヘッダータブ -->
    <div id="tab-1" class="switch"></div>
    <div id="tab-2" class="switch"></div>
    <div id="tab-3" class="switch"></div>
    <div id="tab-4" class="switch"></div>
    <div id="tab-5" class="switch"></div>
    <div class="tabBtn">
        <li><a href="#tab-1">タブ1</a></li>
        <li><a href="#tab-2">タブ2</a></li>
        <li><a href="#tab-3">タブ3</a></li>
        <li><a href="#tab-4">タブ4</a></li>
        <li><a href="#tab-5">タブ5</a></li>
    </div>
    <div class="tabContents">
        <section id="section-1">タブコンテンツ1</section>
        <section id="section-2">タブコンテンツ2</section>
        <section id="section-3">タブコンテンツ3</section>
        <section id="section-4">タブコンテンツ4</section>
        <section id="section-5">タブコンテンツ5</section>
    </div>
    
[/code]

**CSS**

[code]

    .switch {
        display: none;
    }
    
    /* :::::: button :::::: */
    
    .tabBtn {
        display: flex;
        list-style: none;
        width: 100%;
        margin: 0 0 1px;
        padding: 0;
        align-items: center;
        justify-content: flex-start;
    }
    
    .tabBtn li {
        flex-basis: 100px;
        background: white;
        border-right: 1px solid black;
        border-bottom: 1px solid white;
        text-align: center;
    }
    
    .tabBtn li:not(:last-child) {
        /* border-right: 1px solid white; */
    }
    
    .tabBtn li>a {
        display: block;
        height: 100px;
        padding: 10px 0;
        color: black;
        text-decoration: none;
    }
    
    .tabBtn a:hover {
        background: rgba(205, 92, 92, .5);
    }
    
    /* :::::: contents :::::: */
    
    .tabContents section {
        padding: 8px;
        background: white;
    }
    
    /* :::::: mechanism :::::: */
    
    .tabContents section {
        opacity: .1;
    }
    
    .tabContents section {
        transition: opacity .3s;
    }
    
    #tab-1:target~.tabBtn a[href="#tab-1"],
    #tab-2:target~.tabBtn a[href="#tab-2"],
    #tab-3:target~.tabBtn a[href="#tab-3"],
    #tab-4:target~.tabBtn a[href="#tab-4"],
    #tab-5:target~.tabBtn a[href="#tab-5"] {
        background: indianred;
    }
    
    #tab-1:target~.tabContents #section-1,
    #tab-2:target~.tabContents #section-2,
    #tab-3:target~.tabContents #section-3,
    #tab-4:target~.tabContents #section-4,
    #tab-5:target~.tabContents #section-5 {
        opacity: 1;
        background: white;
    }
    
    /*********************************
    
    *********************************/
    
    body {
        margin: 0;
    }
    
[/code]


CC BY-SA 4.0
2020-11-22T07:58:11.067
72144
2020-12-21T06:06:37.217
2020-12-21T06:06:37.217
32986
42828
question
html css
display:flex内の文字の縦位置を中央にできません


`.tabBtn li>a` へ適用している `display` プロパティを `flex` に変更したうえで、 `justify-content`,
`align-items` プロパティを用いて位置調整を行うことで、期待する動作が実現出来ると思います。

[code]

    .switch {
        display: none;
    }
    
    /* :::::: button :::::: */
    
    .tabBtn {
        display: flex;
        list-style: none;
        width: 100%;
        margin: 0 0 1px;
        padding: 0;
        align-items: center;
        justify-content: flex-start;
    }
    
    .tabBtn li {
        flex-basis: 100px;
        background: white;
        border-right: 1px solid black;
        border-bottom: 1px solid white;
        text-align: center;
    }
    
    .tabBtn li:not(:last-child) {
        /* border-right: 1px solid white; */
    }
    
    .tabBtn li>a {
        display: flex; /* 変更 */
        height: 100px;
        padding: 10px 0;
        color: black;
        text-decoration: none;
        justify-content: center; /* 追加 */
        align-items: center; /* 追加 */
    }
    
    .tabBtn a:hover {
        background: rgba(205, 92, 92, .5);
    }
    
    /* :::::: contents :::::: */
    
    .tabContents section {
        padding: 8px;
        background: white;
    }
    
    /* :::::: mechanism :::::: */
    
    .tabContents section {
        opacity: .1;
    }
    
    .tabContents section {
        transition: opacity .3s;
    }
    
    #tab-1:target~.tabBtn a[href="#tab-1"],
    #tab-2:target~.tabBtn a[href="#tab-2"],
    #tab-3:target~.tabBtn a[href="#tab-3"],
    #tab-4:target~.tabBtn a[href="#tab-4"],
    #tab-5:target~.tabBtn a[href="#tab-5"] {
        background: indianred;
    }
    
    #tab-1:target~.tabContents #section-1,
    #tab-2:target~.tabContents #section-2,
    #tab-3:target~.tabContents #section-3,
    #tab-4:target~.tabContents #section-4,
    #tab-5:target~.tabContents #section-5 {
        opacity: 1;
        background: white;
    }
    
    /*********************************
    
    *********************************/
    
    body {
        margin: 0;
    }
[/code]

[code]

    <div id="tab-1" class="switch"></div>
    <div id="tab-2" class="switch"></div>
    <div id="tab-3" class="switch"></div>
    <div id="tab-4" class="switch"></div>
    <div id="tab-5" class="switch"></div>
    <div class="tabBtn">
      <li><a href="#tab-1">タブ1</a></li>
      <li><a href="#tab-2">タブ2</a></li>
      <li><a href="#tab-3">タブ3</a></li>
      <li><a href="#tab-4">タブ4</a></li>
      <li><a href="#tab-5">タブ5</a></li>
    </div>
    <div class="tabContents">
      <section id="section-1">タブコンテンツ1</section>
      <section id="section-2">タブコンテンツ2</section>
      <section id="section-3">タブコンテンツ3</section>
      <section id="section-4">タブコンテンツ4</section>
      <section id="section-5">タブコンテンツ5</section>
    </div>
[/code]


CC BY-SA 4.0
2020-11-22T08:42:24.547
72146
2020-11-22T08:42:24.547
32986
72144
answer