html - 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

在您的代码中，按行高垂直对齐，这就是它的工作原理。如果你需要完美居中，你可以绝对定位元素。我修改你的 fiddle 来实现它:

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

在第一个黄色 block 中，目标是您的代码。 我的修改在第二个黄色 block 中:

    .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%);
    }

祝你好运