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

Question

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

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

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

小提琴

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

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 中，为什么我的“块”</divs>最后是红色的？它没有正确关闭吗？

Answer 1

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

演示

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

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

Answer 2

.block h2 {
    text-align: center;   
}

.block img {
    display: block;
    margin: 0 auto;
}

JSFiddle：http: //jsfiddle.net/kGt54/6/

Answer 3

.products {
    display:inline-block;
    text-align:center; /*This will center everything inside products div*/
}

.block {
    position:relative;
    width:213px;
    height:250px;
    background-color:#EEE;
    margin:10px;
    float:left;
    left:-10px;
}
.block p{
   text-align:left; /* This will override the align center 
                       and will align-left only the <p> that are inside block */
}

Answer 4

像这样

演示

css

.products {
    display:inline-block;
}

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

Answer 5

您可以使用 CSS 属性：text-align

.block h2{
    text-align:center;
}

.block p{
    text-align:center;
}

要使图像居中，您可以将图片放在一个段落中：

在这里检查结果：http: //jsfiddle.net/833Yq/

Answer 6

是的，添加.block h2 {text-align:center;}到你的 CSS

您需要使用 / 关闭图像标签，以阻止 div 以红色突出显示

我更新了小提琴 - http://jsfiddle.net/kGt54/8/。这包括一个额外的 div 用于使图像居中。还有其他方法可以接近图像居中