How can I add some css to center certain divs if they are using the same css style? [duplicate]

Tags: html,css

Problem :

I'm trying to keep the same styles (summary-description and summary-headline). I would want the divs that include Apple, Banana and Carrot text to all be centered.

I would want to keep the Watermelon text to be aligned left.

How would I accomplish this?

Check out my jsfiddle: http://jsfiddle.net/p28Qz/12/

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>

CSS

#wrapper-threecol {
    position:relative;
    width:100%;
    border: none;
    margin: 20px 0 37px 0;
}
#threecol_row {
    height:100%;
    white-space:nowrap;
}
.threecol_cell1, .threecol_cell2, .threecol_cell3 {
    height:100%;
    width:30%;
    display:inline-block;
    white-space:normal;
    vertical-align: top;
    margin-left: 5%;
}
.threecol_cell1 {
    margin-left: 0;
}
.summary-headline {
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 24px;
    margin:0 0 10px 0;
    text-align: left;
}
.summary-description {
    color: #232323;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 23px;
    margin: 0;
    text-align: left;
}
.wrapper-data {
    position:relative;
    width:100%;
    border: none;
    margin: 40px 0 0 0;
    overflow: hidden;
}
.data_row {
    height:100%;
    min-height:100%;
    white-space:nowrap;
    display:table;
    width: 100%;
}
/* Landing Data - Left Content  */
.data_cell1_lt {
    width:47%;
    white-space:normal;
    display:table-cell;
    vertical-align:middle;
}
.data_cell2_lt {
    width:6%;
    display:table-cell;
    white-space:normal;
}
.data_cell3_lt {
    width:47%;
    display:table-cell;
    white-space:normal;
}
.data_cell3_lt img {
    display:block;
    margin:0 auto;
}
.data_cell3_lt p {
    text-align:center;
}

---

Solution :

Add just this simple rule to your stylesheet:

#threecol_row p {
    text-align: center;
}

FIDDLE: http://jsfiddle.net/p28Qz/14/