css - 将标题文本居中放置在 div 中但让其余文本左对齐的最佳方法？

Question

我有 6 个 div，每行 3 个，我想用一个居中的标题填充每个 div，图像居中，然后图像下方的文本左对齐。

实现此目标的最巧妙方法是什么？

有没有可能做到.block h2 {...}并以这种方式居中？

Fiddle

到目前为止，这是我的代码:

HTML:

<div class="products">

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

</div>

CSS:

.products {
    display:inline-block;
}

.block {
    position:relative;
    width:213px;
    height:250px;
    background-color:#EEE;
    margin:10px;
    float:left;
    left:-10px;
}

此外，在 JSFiddle 中，为什么我的“ block ”</divs>最后是红色？是不是没关好？

Answer 1

您需要以下具有 text-align 属性的选择器

Demo

.block {
    text-align: center; /* Center text in .block */
}

.block p {
    text-align: left; /* Override centering by using left as a value */
}