Question

我很难理解为什么我的标题标题不会居中，如果它太短并且不占用最多两行。

我的HTML代码是这样的：

<div class="tileBlock" id="divItinerary_432" style="background: url(&quot;http://qa.tourizz.com/public/images/_tileview/EUA0018.png&quot;) no-repeat scroll center center transparent;">
<div class="pin">
    <div class="tileHeaderBG"></div>
    <div class="tileHeader">
         <h3 class="title" data-toggle="tooltip" style="margin-top:5px;" title="All France-Nice-3 day tour">This is the header</h3>

        <p class="code" data-toggle="tooltip" style="position: absolute;top: 50px;" title="Nice">Nice</p>
    </div>
</div>
</div>
<!-- long Nice -->
<div class="tileBlock" id="divItinerary_432" style="background: url(&quot;http://qa.tourizz.com/public/images/_tileview/EUA0018.png&quot;) no-repeat scroll center center transparent;">
<div class="pin">
    <div class="tileHeaderBG"></div>
    <div class="tileHeader">
         <h3 class="title" data-toggle="tooltip" style="margin-top:5px;" title="All France-Nice-3 day tour">This is the header This is the header</h3>

        <p class="code" data-toggle="tooltip" style="position: absolute;top: 50px;" title="Nice">NiceNice NiceNiceNiceNice NiceNiceNiceNiceNice</p>
    </div>
</div>
</div>

我的CSS是

    .tileBlock {
    border: 1px solid #000000;
    display: inline-block;
    height: 345px;
    margin: 0 auto 4px;
    transition: all 0.2s ease 0s;
    width: 260px;
}
.tileHeaderBG {
    background-color: #27506A;
    height: 100px;
    opacity: 0.6;
    position: relative;
    top: 20px;
    white-space: pre-wrap;
    width: 100%;
}
.tileHeader {
    color: #FFFFFF;
    font-family:'WebFont';
    height: 100px;
    position: relative;
    text-shadow: 1px 1px 0 #555555;
    top: -84px;
    width: 100%;
    z-index: 100;
}
.tileHeader h3.title {
    font-size: 22px;
    margin: 0;
    padding: 0 5px;
    position: absolute;
    text-align: center;
}
.tileHeader p.code {
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 1;
    margin: 5px 0 0;
    padding: 0;
    text-align: center;
}
.tileFooterBG {
    background-color: #27506A;
    height: 60px;
    opacity: 0.7;
    position: relative;
    top: 68px;
    width: 100%;
}
.tileFooter {
    color: #FFFFFF;
    font-family:'WebFont';
    height: 60px;
    position: relative;
    top: 8px;
    width: 100%;
}
.tileFooter p.unit {
    font-size: 11px;
    font-weight: 800;
    left: 5px;
    letter-spacing: 0.7px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 14px;
}
.tileFooter h3.amount {
    font-family:'Amount';
    height: 50px;
    left: 35px;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    text-shadow: 2px 2px 0 #555555;
    top: 8px;
    vertical-align: middle;
}
.tileButtonHolder {
    height: 60px;
    position: absolute;
    right: 5px;
}
.tileFooter p.footer-caption {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.7px;
    margin: 0;
    padding: 0;
    position: relative;
    right: 3px;
    text-align: center;
    top: -1px;
}

我也使用了twitter bootstrap 3。

请检查http://jsfiddle.net/ajWmT/5/，我希望第一个图块中的标题和副标题居中，就像第二个图块中发生的那样。两个图块都具有相同的代码，只有标题和副标题的长度不同。

我需要帮助将标题标题和副标题集中在一起，即使它们是单行标题。提前谢谢。

Answer 1

带有长文本的标题居中的原因是因为它被拉伸以占用100％的空间。在元素上使用position:absolute时，除非另有说明，否则它们只会与内容一样宽。

您需要做的是将width: 100%;添加到您的绝对定位元素。

.tileHeader h3.title {
    font-size: 22px;
    margin: 0;
    padding: 0 5px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.tileHeader p.code {
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 1;
    margin: 5px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

Fiddle

如果Single-Liner，标题标题和字幕不居中

1 个答案: