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

Question

我有以下小提琴

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

我知道我可以使用：

text-align: center;

但有一个问题:)div包含 4 个图像的 被放在HTML代码中的 is 之前<h3>。由于我无法编辑顺序，因此HTML我想DIV使用图像来降低图像的顺序margin-top: 70px;，问题是这会对文本产生影响，而<h3>不再是centered这样。

怎么解决这个问题呢？（首选 CSS3）

如果需要更改DIV'sin的值来修复它也没关系（我可以更改它们）HTML

多谢

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

float:right;而不是margin:top在包含图像的元素上，将其绝对定位。

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

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