Html 如果某些div使用相同的css样式，如何添加一些css以使其居中？

我试图保持相同的风格（摘要描述和摘要标题）。我希望包括苹果、香蕉和胡萝卜文本的div都居中

我想保持西瓜文本向左对齐

我将如何做到这一点

查看我的JSFIDLE：

HTML

    <div id="wrapper-threecol">
      <div id="threecol_row">
        <div class="threecol_cell1">
            <p class="summary-headline">Apple</p>
            <p class="summary-description">Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad</p>
        </div>
        <div class="threecol_cell2">
            <p class="summary-headline">Banana</p>
            <p class="summary-description">Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad</p>
        </div>
        <div class="threecol_cell3">
            <p class="summary-headline">Carrot</p>
            <p class="summary-description">Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad</p>
        </div>
    </div>
</div>
<div class="wrapper-data">
    <div class="data_row">
        <div class="data_cell1_lt">
            <p class="summary-headline">Watermelon</p>
            <p class="summary-description">We here at the National Watermelon Promotion Board have one goal: to increase consumer demand for fresh watermelon through promotion.</p>
        </div>
        <div class="data_cell2_lt">&nbsp;</div>
        <div class="data_cell3_lt">
            <img alt="New Search Field" height="273" src="http://www.juicing-for-health.com/wp-content/uploads/2012/06/watermelon.jpg" width="420" />
        </div>
    </div>
</div>

---

只需将这些元素的

p

居中即可

.threecol_cell1 p, .threecol_cell2 p, .threecol_cell3 p {
    text-align: center;
}

---

我会使用以下方法执行类似操作：

因此，

.summary description--right

将继承您的所有样式，然后在其自己的选择器中进行适当的更改。

下面是一个示例，其中创建了两个附加类，并且可以附加到您希望的任何元素上-只需将多个类保留在引号中，而不使用逗号分隔符

CSS

---

只需在样式表中添加以下简单规则：

#threecol_row p {
    text-align: center;
}

---

FIDDLE:

在我的另一篇文章中，没有人正确回答我的问题。不要在同一篇文章中重复同一个问题。。。发表在你之前的问题是你最应该考虑的问题。

.summary-description,
.summary-description--right {
    //styles
}

.summary-description--right {
   text-align: right;
}

.banana {
    width: 100px;
    height: 20px;
    background-color: yellow;
}
.apple {
    width: 50px;
    height: 50px;
    background-color: red;
}
.orange {
    width: 60px;
    height: 60px;
    background-color: orange;
}
.blackborder {
    border: 3px solid black;
}
.blueborder {
    border: 4px solid blue;
}

#threecol_row p {
    text-align: center;
}