Question

我在使用CSS完成我想要的任务时遇到了问题：

样式表：

/* firstHeading */
.firstHeading {
background-color:#9f9f2c;
padding:10px;
font-family: 'BankGothic Md BT', Machine;
font-variant: small-caps;
text-transform: capitalize;
font-weight: normal;
font-size: x-large;
color:#ffff95;
border-style: ridge;
border-width: 2px;
border-color: gray;
border-collapse: separate;
border-spacing: 2px;
margin-top:0;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
text-align: center;
display: inline-block;
*zoom: 1;
*display: inline;
}

HTML：

<h1 id="firstHeading" class="firstHeading">List title</h1>

挑战：这看起来非常符合我的要求，但现在我需要在页面上水平（而非垂直）居中，同时保持边框和背景填充颜色的大小与它们的大小相似 - 纯粹在CSS中。 “列表标题”可以很短或很长 - 动态宽度。

如您所见，我尝试将左右边距设置为自动。此时的大多数建议我都建议设置宽度，例如'width：100％;'。当我这样做时，它在页面中心，但它确实拉伸了背景“阻止”，我希望它更适合形式。我读到的其他建议也使它不是动态宽度，然后我遇到了包装问题。

我也无法在HTML中包含另一个div：它已经包含在一个名为“content”的div中 - HTML是从MediaWiki页面生成的代码。如果我们以“内容”为中心，我们的中心不仅仅是标题，而是页面内容的其余部分，我希望它能够左对齐。

建议？

Answer 1

您正试图将inline-block居中，这实际上只能通过在父元素上设置text-align: center;来实现。

您可以先将h1设置为display: block;和text-align: center;。之后，您可以使用span内的h1作为背景/边框效果。这样做可以使跨度位于h1标签的中心位置，而不会使跨度的宽度向外扩展。

<强> HTML：

<h1 id="firstHeading" class="firstHeading">
    <span>List title</span>
</h1>

<强> CSS：

/* firstHeading */
.firstHeading {
    margin-top:0;
    margin-bottom:10px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    display: block;
    *zoom: 1;
    text-align: center;
}

.firstHeading span {
    background-color:#9f9f2c;
    padding:10px;
    font-family: 'BankGothic Md BT', Machine;
    font-variant: small-caps;
    text-transform: capitalize;
    font-weight: normal;
    font-size: x-large;
    color:#ffff95;
    border-style: ridge;
    border-width: 2px;
    border-color: gray;
    border-collapse: separate;
    border-spacing: 2px;
}

示例：http://jsfiddle.net/s2kjY/

Answer 2

元素必须具有明确的宽度设置，以便使用自动边距水平居中。如果您使用的是display: inline-block，那么您应该可以使用text-align: center。

水平居中H1 / Class，动态宽度，缩小到适合边框

2 个答案: