如何使用 css 使我的 <h3> 文本居中？

Question

我有以下fiddle

HTML 由 javascript 创建。如果需要，我可以将样式添加/更改为div's，但我无法更改 HTML 代码的顺序。

我知道我可以使用：

text-align: center;

但是有一个问题 :) 包含 4 张图像的 div 放在 HTML 代码中 <h3> 之前。由于我无法编辑HTML 订单，我想通过使用margin-top: 70px; 的图像降低DIV 问题是这对<h3> 中的文本有影响，而centered 不再是centered。

如何解决这个问题？ （使用 css3 的首选）

如果需要更改HTML 中DIV's 的值以修复它，那也没关系 （我可以改变它们）

非常感谢

HTML 代码：

<div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;">
<form method="get" action="">
    <div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;">
        <div><img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
        <div><img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
    </div>
    <h3>Options</h3>
    <h4>Images for size 119</h4>
</form>
</div>

CSS：

div.solitaireprefs {
    background-color: #fff;
    border-radius: 7px; 
    border: 1px solid #ddd;
}

div.solitaireprefs form {
    padding: 0 15px;
}

div.solitaireprefs h3 {
    background: #e9e9e9;
    margin: 0 -15px;
    padding: .7em 0;
    text-align: center;
    border-radius: 7px 7px 0 0 ; 
}

Answer 1

这个问题的真正答案是弄清楚如何正确排列 dom 元素。语义比你想象的更重要。但是由于您已经在修改视觉效果，因此最快和最肮脏的 hack 就是修复您的填充：

padding: .7em 45%;

在 div.solitairprefs h3 上 调整百分比以获得中间值，但在 h3 上缺少的左右填充总和的 10% 是选项文本出现位置之间的空间（因此相应地调整）。 而且由于您已经手动居中，您可以继续摆脱

text-align: center;

Answer 2

不要在包含图像的元素上使用float:right; 和margin:top，而是绝对定位它。

{ position: absolute;
  top: 70px; 
  right: 10px;
}

使用绝对定位使其脱离文档流；这就是搞乱您的h3 的中心。