На моей веб-странице не работает вертикальное выравнивание по центру без ячейки таблицы или сгиба - PullRequest
Новая
       41

На моей веб-странице не работает вертикальное выравнивание по центру без ячейки таблицы или сгиба

0 голосов
/ 23 февраля 2019

Я сослался на несколько ответов здесь на stackoverflow и нашел несколько решений для вертикального выравнивания пролета внутри div.Я хочу избегать table-cell и flex .Я написал следующий код, который отлично работает в JSFiddle , но не в моем шаблоне.Я использовал свой style.css в качестве последней строки в голове, что означает, что мои стили будут реализованы выше всех остальных.Кроме того, я использовал 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>

Я пытался использовать

! Важный

со всеми из них, нодо сих пор нет результатов.Почему текст диапазона не выравнивается по вертикали?

...