css - 如何在 h1 背景中垂直居中跨度

Question

我在 h1 中有一个 span，我想将它在 h1 背景中垂直居中。

h1 {
  background-color: green;
}
span {
    font-size: 8.5px;
    color: #fff;
    display: inline-block;
    width: 10px;
    height: 15px;
    padding-left: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
}

<h1>Title <span>i</span></h1>

Answer 1

只需添加 vertical-align:middle; 到它的样式中:

h1 {
  background-color: green;
}
span {
    font-size: 8.5px;
    color: #fff;
    display: inline-block;
    width: 10px;
    height: 15px;
    padding-left: 5px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    vertical-align:middle;
}

<h1>Title <span>i</span></h1>

如果这还不够居中(它可以基于您的字体大小)，您可以使用 flex 实现真正的居中——以下也将 i 在圆圈中居中:

h1 {
  background-color: green;
  
  /*add this*/
  display:flex;
  width:100%;
}
span {
    font-size: 8.5px;
    color: #fff;
    width: 15px;
    height: 15px;
    border: 1px solid #fff;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    
    /*use this for vertical centering*/
    align-self:center;
    
    /*use this to center the i*/
    display: inline-flex;
    justify-content:center;
    align-items:center;
}

<h1>Title <span>i</span></h1>