html - 将 Apple、Banana 和 Carrot div 中的所有文本居中的最佳做法是什么？

Question

我试图保持相同的样式(摘要描述和摘要标题)。我希望包含 Apple、Banana 和 Carrot 文本的 div 全部居中。

我想让西瓜文字保持左对齐。

我将如何完成这个？

查看我的 jsfiddle:http://jsfiddle.net/p28Qz/12/

<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>
#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;
        }

Answer 1

您缺少 rtecenter 的定义:

.rtecenter {text-align: center;}

然后确保也将它添加到您的第一个 block 中:

<p class="summary-headline rtecenter">Apple</p>