Question

我正在尝试保持相同的样式（摘要说明和摘要标题）。我希望将包含Apple，Banana和Carrot文本的div都集中在一起。

我希望保持西瓜文本左对齐。

我将如何做到这一点？

查看我的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;
}

Answer 1

将这个简单的规则添加到样式表中：

#threecol_row p {
    text-align: center;
}

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

Answer 2

只需将这些元素的p居中。

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

Fiddle for reference

Answer 3

我会使用BEM syntax执行类似的操作：

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

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

所以.summary-description--right继承了你的所有样式，然后在自己的选择器中进行适当的更改。

Answer 4

这是一个FIDDLE，其中创建了两个额外的类，并且可以附加到您希望的任何元素上 - 只需将多个类保留在引号中，而不是逗号分隔符。

CSS

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

如果他们使用相同的CSS样式，我如何添加一些CSS来居中某些div？

4 个答案: