Question

我在这里提到了关于stackoverflow的几个答案，并找到了一些在div内垂直对齐范围的解决方案。我想避免使用表格单元格和 flex 。我编写了以下代码，这些代码在JSFiddle 中工作正常，但在我的模板中却没有。我已经将style.css用作head中的最后一行，这意味着我的样式将在所有其他样式之上实现。另外，我使用JS来确保各个div中的所有跨度都相等。

    var maxHeight = 0;
    $(".tileheading").each(function () {
        if ($(this).height() > maxHeight) {
            maxHeight = $(this).height();
        }
    });

    $(".tileheading").height(maxHeight);

h4 {
  font-size: 36px;
  line-height: 36px;
  font-family: 'Marvel', sans-serif;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.tileheading
{
    margin-top: 20px;
    margin-bottom:0px;
    font-weight:bold;
}
.tilehead{
    text-align: center;
}
.tilehead::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.heading {
    vertical-align: middle;
}

<h4 class="tilehead">'
 <span class="tileheading heading">
    This is Heading 1
 </span>
</h4>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

我尝试使用

！重要

所有这些，但仍然没有结果。为什么跨度文本没有垂直对齐？

没有表格单元格或flex的垂直对齐中间在我的网页中不起作用

0 个答案: