Question

我有两行3的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属性

的以下选择器

Demo

.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

喜欢这个

<强> demo

<强> 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。还有其他方法可以实现图像居中

在div中居中标题文本的最佳方法，但是文本的其余部分是否保持对齐？

6 个答案: