Question

我有以下fiddle

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

我知道我可以使用：

text-align: center;

但有一个问题:)包含4张图片的div会放在HTML之前的<h3>代码中。由于我无法修改HTML订单，因此我想使用DIV降低margin-top: 70px;图片的问题，问题是这会对<h3>中的文字产生影响＃39; t centered了。

如何解决这个问题？（pref with 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元素。语义学比你想象的更重要。但是因为你已经有点黑客攻击视觉效果，最快最肮脏的黑客就是修复你的填充物：

padding: .7em 45%;

div.solitairprefs h3上的

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

text-align: center;

Answer 2

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

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

使用绝对定位将其从文档流中取出;这就是弄乱你h3的焦点。

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

2 个答案: