Center images within div - css

Question

Hello guys I'm trying to centre some images. They keep on floating to the left,I've tried text-aligning but it doesn't seem to work. THe jsfiddle is here. http://jsfiddle.net/E7Ydz/2/ P.S. I could probably do this when I've had some sleep, it's 5:56 in London :(
[HTML]
<div id="portfolio" style="height: 3020px;">
<div id="project" class="cms design html-css " data-col="1" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry1" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail275.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="design illustration html-css " data-col="2" data-row="0" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry2" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/work_thumbnail2.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
<div id="project" class="app database design " data-col="0" data-row="1" style="right: 0px; opacity: 1; top: 0px;">
<div id="workEntry3" class="workEntry">
<div id="thumbAttachment">
<div id="inThumb">
<img src="http://www.enjoythis.co.uk/wp-content/files_mf/pgtips_thumb37.jpg">
</div>
<div id="blackCross"> <img src="http://www.enjoythis.co.uk/wp-content/themes/enjoyThis/images/thumb_transparency.png"></div>
</div>
<!--<div id="attachmentShadowThumb"></div>-->
<div id="workTitle">
</div>
<div id="workTags">
</div>
</div>
</div>
[css]
#project{
float:left;
position:relative;
padding: 0px 0px 0px 2px;
height:200px;
width:309px;
display: inline;
}
.workEntry{
width:310px;
overflow:hidden;
}
#thumbAttachment{
float:left;
width: 310px;
height:200px;
overflow: hidden;
}
#inThumb{
float:left;
}
#blackCross{
float:left;
width: 310px;
height:200px;
margin-top:-200px;
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:visited{
khtml-opacity:0;
-moz-opacity:0;
-ms-filter:"alpha(opacity=0)";
filter:alpha(opacity=0);
opacity:0;
}
#blackCross:hover{
khtml-opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
opacity:100;
}

Answer 1

Hope I understand your question well. You should use margin-left: auto; and margin-right: auto; to make a div (or in a better word, a block position element) center.
For instance you should change your css code to something like:
#inThumb{
margin-left: auto;
margin-right: auto;
}
See this jsFiddle: http://jsfiddle.net/E7Ydz/4/