html - 如何使用 css 将

Question

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

我知道我可以使用:

text-align: center;

但是有一个问题:) div包含 4 张图像的文件被放入 HTML <h3>之前的代码是。由于我无法编辑 HTML我想降低 DIV 的顺序图像使用 margin-top: 70px;问题是这对 <h3> 中的文本有影响。这不是 centered了。

如何解决这个问题？ (使用 css3 的首选项)

如果 DIV's 的值是可以的在 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

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

padding: .7em 45%;

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