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

Question

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?

jsFiddle is expecting you to close the `img` tags (self close). — emerson.marini, Oct 30 '13 at 11:39
Don't need really, but jsFiddle is probably expecting for xHTML. Who knows? — emerson.marini, Oct 30 '13 at 11:41
Regarding the closing tags: http://stackoverflow.com/questions/7366344/do-we-still-need-end-slashes-in-html5 — emerson.marini, Oct 30 '13 at 11:43

score 2 · Accepted Answer · answered Oct 30 '13 at 11:40

2

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 */
}

answered Oct 30 '13 at 11:40

Mr. Alien

153,751
34
298
278

score 1 · Answer 2 · answered Oct 30 '13 at 11:45

1

.block h2 {
    text-align: center;   
}

.block img {
    display: block;
    margin: 0 auto;
}

JSFiddle: http://jsfiddle.net/kGt54/6/

answered Oct 30 '13 at 11:45

Ed T.

1,039
2
11
17

I like this approach for centering the image as it doesn't involve extra markup – grimmus Oct 30 '13 at 11:47
That's also the way W3C wants us to center images. http://www.w3.org/Style/Examples/007/center.en.html#block – Ed T. Oct 30 '13 at 11:52

Ricky Stam · Answer 3 · 2013-10-30T12:03:56.037

0

.products {
    display:inline-block;
    text-align:center; /*This will center everything inside products div*/
}

.block {
    position:relative;
    width:213px;
    height:250px;
    background-color:#EEE;
    margin:10px;
    float:left;
    left:-10px;
}
.block p{
   text-align:left; /* This will override the align center 
                       and will align-left only the <p> that are inside block */
}

edited Oct 30 '13 at 12:03

answered Oct 30 '13 at 11:41

Ricky Stam

2,116
21
25

1

Please add some comments - what is each part for? What differs from what OP has provided and why? – DarkWanderer Oct 30 '13 at 12:00
Sorry, I hope it's better now! – Ricky Stam Oct 30 '13 at 12:06

score 0 · Answer 4 · answered Oct 30 '13 at 11:41

Like this

demo

css

.products {
    display:inline-block;
}

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

score 0 · Answer 5 · answered Oct 30 '13 at 11:45

0

You can use the CSS property: text-align

.block h2{
    text-align:center;
}

.block p{
    text-align:center;
}

To center the images, you can put the pictures inside a paragraph:

Check the result here: http://jsfiddle.net/833Yq/

answered Oct 30 '13 at 11:45

MTG

551
3
14

score 0 · Answer 6 · answered Oct 30 '13 at 11:46

Yes, add .block h2 {text-align:center;} to your css

You need to close your image tags with a / to stop the div's being highlighted in red

I updated the fiddle -http://jsfiddle.net/kGt54/8/ . This includes an extra div for centering the image. There would be other ways to approach the image centering

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

6 Answers6