<summary> 内的文本垂直居中

Question

我有一个 a 的摘要标签，但摘要中的文本位于顶部。我怎样才能使它垂直居中

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;
    }

Answer 1

如果 summary 中只有一行文本，则 line-height 等于 height，将使文本对齐垂直在中心。因此，根据您的 css，以下内容可以做到：

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

Answer 2

嘿，如果你想要同样的款式那么

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.7;
     text-align:center
    }

行高适合您：行高：1.7；文本对齐：居中；这就是你Demo

<summary> 内的文本垂直居中

vertically center text inside a <summary>

html

css

centering