Q:

Best way to center title text in a div but have the rest of the text left aligned?

I have 6 divs in two rows of 3 and I want to populate each one with a title that's centered, and image centered and then text under the image that's left aligned.
What's the neatest way to achieve this? 
Is it possible to do .block h2 {...} and center that way?
Fiddle
Here is my code so far:
HTML:
<div class="products">

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

<div class="block"><h2>...</h2><img src="..."><p>...</p></div>

</div>

CSS:
.products {
    display:inline-block;
}

.block {
    position:relative;
    width:213px;
    height:250px;
    background-color:#EEE;
    margin:10px;
    float:left;
    left:-10px;
}

Also, in JSFiddle, why are my "block" </divs> red at the end? is it not closed properly?

A:

You need the below selectors with text-align property
Demo
.block {
    text-align: center; /* Center text in .block */
}

.block p {
    text-align: left; /* Override centering by using left as a value */
}

