CSS-將文字與文字行垂直對齊

Question

在這里有一個js-fiddel- https: //jsfiddle.net/zhfs7hxq/

很簡單，我在div內有一個文本，而該div內的跨度內有文本。

我需要將div內較大文本的垂直跨度居中。

vertical-align: middle; 略微移動但不會居中。

    *{
        font-family: sans-serif;
    }
    .name{
        background: yellow;
        font-size: 40px;
        font-weight: bold;
    }
    .name-inner{
        display: inline;
        font-size: 20px;
        vertical-align: middle;
    }

Answer 1

在您的代碼中，行高度是垂直對齊的，這就是它的工作方式。 如果需要完美居中，則可以將元素絕對定位。 我修改您的小提琴以實現它：

https://jsfiddle.net/zhfs7hxq/1/

在第一個黃色塊中，將您的代碼作為目標。 我的修改在第二個黃色塊中：

    .name{
        margin: 10px;
        position:relative;
        background: yellow;
        font-size: 40px;
        font-weight: bold;
    }
    .name.other .name-inner{
        position: absolute;
        display:inline-block;
        font-size: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

祝好運

Answer 2

如果可以使用彈性框 ，請嘗試以下JSFIDDLE ： https : //jsfiddle.net/zhfs7hxq/2/

請注意， vertical-align僅適用於表格單元和內聯級元素。

彈性盒解決方案

將此添加到.name以將其顯示設置為flex：

.name {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}

並在.name-inner添加以下內容以垂直居中對齊：

.name-inner {
  -webkit-align-self: center;
     -moz-align-self: center;
      -ms-align-self: center;
          align-self: center;
}

Answer 3

您的代碼有一個line-height 。 嘗試使line-height相同：

line-height: 45px;

片段

 *{ font-family: sans-serif; } .name{ background: yellow; font-size: 40px; font-weight: bold; line-height: 40px; } .name-inner{ font-size: 20px; vertical-align: middle; line-height: 45px; } 

 <div class="name">Heading one <span class="name-inner">Heading insert</span></div>