I am trying to create a layout with 6 divs arranged in two rows of 3. Each div should have a centered title, a centered image, and text aligned to the left underneath.
What is the best approach to achieve this layout?
Is it possible to center the title using .block h2 {...} method?
Below is the code I have written 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 there an issue with the closing tag?