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

如果您可以使用flex box，请尝试 JSFIDDLE ：https://jsfiddle.net/zhfs7hxq/2/

请注意，vertical-align仅适用于表格单元格和内联级元素。

Flex box解决方案

将其添加到.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;

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

CSS - 将文本与文本上的行垂直对齐

3 个答案: