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/


    CSS Howto..

    How to delete only the selected message inside a #Chat using jquery?

    How to get elements by class and provide css effects?

    How to achieve this oval layout with CSS

    How to change/add CSS inside of iframe by jQuery

    PHP Header Include (nav bar) not showing up [closed]

    How come one jquery script cant effect another jquery script

    How do I implement responsive design into my CSS when I have two spans, side by side?

    How to show a background color over the full width when zooming in?

    CSS/JS: How do I copy the edge pixels and repeat them

    How do I control the height of the main content area no matter how much text is in there?

    My footer keeps moving after updating other parts of my code. How do i fix this?

    How to overlap images in the header section?

    how to setup css value for “-webkit-transform” in the “animate” method? [duplicate]

    How do I stop the text from moving when hovered? (background-image is involved)

    How to apply nested css using jQuery?

    How to give a css code for combined classes in HTML [duplicate]

    How to float 3 divs with margin left & right 0px?

    How can I setup a border inside the div

    Why are div's not staying in row and how to get them to?

    How to build those rectangular with picture and text css bootsrap? [closed]

    How to disable CSS minifier in Liferay?

    How to get a reference to id=“xxx.yyy” in CSS?

    In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

    How to make one div's height depended of another div's height?

    how to edit the width of menu bar in dreamweaver

    How to break text in a line in a div by css?

    How to asynchronously load CSS using jQuery?

    RoR - howto convert some HTML-elements with css to Rails

    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]

    How to add labels for multiple textboxes inside 1 li element