Search code examples
htmlcsscentering

vertically center text inside a <summary>

I have a summary tag for a but the text inside the summary is at the top. How can I center it vertically

HTML

<details class="FAQ"><summary class="FAQ">Where can I find the most detailed information?</summary></details>

CSS

details.FAQ{
    padding:7px 7px 7px 29px;
    }

summary.FAQ{
    height: 29px; 
    background-color: #8CA6D2; 
    color: #231F20; 
    border-radius: 5px; 
    cursor:pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    line-height: 1.3;
    }

summary.FAQ:hover{
    border:1px solid black; 
    background-color: #F2F2F2;
    }
Solution

  • If there is only a single line of the text in the summary then, giving a line-height equal to the height, will make the text aligned vertically at the center. So as per your css, the following will do it:

    summary.FAQ {
  line-height: 29px;
}