Question

我正在尝试将具有未知高度的文本块居中，并且table-cell也不适用于它（宽度需要为父项的100％）。我试图集中的部分是headerText p类。我在下面列出了html / css。任何帮助都会非常感谢！

HTML

<div class="headerContent">                      
            <a href="#" class="scrollup">Scroll</a>
            <a href="#windSection" id="scrolldown">Scroll</a>

            <h1 class="title">Title</h1>

            <p class="headerText">
                TEST GOES HERE. THIS IS THE TEXT I AM TRYING TO CENTER. IT HAS NO SET HEIGHT.>
            </p>

            <div class="green select">

                <a class="button" href="links/calculator.html">Discover</a>

            </div>

            <img class="people" src="images/people.png" />

            <p class= "noElechouse"></p>

        </div>

CSS：

.headerContent {
    position:relative;
    width:55%;
    margin:auto;
    height:100%;
    text-align:center;

}

.title {
    font-family: 'Oxygen', sans-serif;
    font-weight:700;
    color:white;
    font-size:90px;
    padding-bottom:15px;
}

.headerText {
    font-family: 'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:27px;
    width:90%;
    margin:auto;
}

Answer 1

在您的情况下，您不需要使用JavaScript。

首先从padding-bottom:15px元素中删除.title，然后将margin值设置为0。然后为.headerText元素提供0 auto 10px的边距;将margin-top设置为0，将margin-bottom设置为10px。假设元素的宽度为90%，则auto用于水平居中。垂直对齐不再是问题，因为垂直相邻的元素都具有10px的分离边界。

EXAMPLE HERE

.title {
    font-family:'Oxygen', sans-serif;
    font-weight:700;
    font-size:90px;
    padding:0;
    margin:0;
}
.headerText {
    font-family:'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    width:90%;
    margin:0 auto 10px;
}

或者，您也可以使用以下内容：

.headerText {
    font-family:'Oxygen', sans-serif;
    font-weight:400;
    font-size:18px;
    width:100%;
    margin:0 auto 10px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Answer 2

在不知道高度的情况下，您必须使用百分比估算它的大小，即

.headerText { width:90%; height:50%; margin:25% 5%; }

或使用javascript垂直居中

#headerText { width:90%; top:50%; margin:0 5%; } //CSS

var eh = document.getElementByID('headerText'); //change from class to ID
eh.margin.top = -(eh/2);

或所有jQuery

ht = $('.headerText');
elH = ht.height();
wH = $(window).height();

marginTop = (wH/2)-(elH/2);
ht.css('margin-top',-marginTop);

垂直居中而不使用表格单元格且未知高度

2 个答案: