Question

我有一个摘要标记，但摘要中的文字位于顶部。我怎样才能垂直居中

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>中的垂直居中文本

2 个答案: