problem with horizontal align

how to center many div elements in wrapping div?

[Twilight]

Greetings.
I have a rather difficult problem, I've tried to do this and that but nothing works.
I have some div elements in wrapping div on the page, the amount is unknown (they are generated by php-script and filled with the information from database). All these divs are the same. Each div contains an image of fixed size and two lines of text. These divs have the same height and the same width, so they look like the cells of the table. I want these divs to be centered inside the wrapping div and I can't find the solution. I have started thinking that task is impossible...
Here is the code:
html:

<div class="wrapping_element"> 
 <div class="element"> 
 <div class="element_img_box"> 
  <a href="..."><img src="..." width="148" height="148" /></a> 
 </div> 
 <br /> 
 <div style="width:150px;"> 
  <a href="...">name of the element</a> 
 </div> 
 <br /> 
 <br /> 
 <div style="width:150px;"> 
  price of the element 
 </div> 
 </div> 
</div> 

css:

.element 
{ 
text-align:center; 
width:150px; 
height:300px; 
color:#F63; 
font-weight:bold; 
vertical-align:top; 
padding-left:5px; 
padding-right:5px; 
float:left; 
} 
.element_img_box 
{ 
margin:0; 
width: 150px; 
height: 154px; 
} 

So, is there any way to make divs class="element" be centered or at least justified inside div class="wrapping_element"?

[Marshall]

Add margin: 0 auto; to the two <div> classes. You may also have to add text-align: left; to the <div>'s to address an IE issue, but test it first.

Marshall

[Twilight]

Marshall, thank you for your reply, but "margin:0 auto;" changes nothing. I'm afraid my English is to poor to describe the problem in all details, but I'll try. (The best way to do it would be just posting a link, but that's prohibited.)

Like I said, I have some amount of elements on the page inside the middle column, the quantity of these elements is unknown, they are generated by the CMS. I want these elements, these "div"s to look like the cells of the table. I achieved that by declaring the same height and width of the elements and by adding "float:left;", so they really look like a table and in fact are better than the table - the amount of elements in a row depends on the screen resolution, on available space, so when the elements fill the "row", they start another "row", and the whole thing looks good on all resolutions (I don't think that can be done by the table). But not so good - the "row" starts on the left side of the column, and when there is not enough space for another element to be shown, the end of the "row" is filled by blank space. Well, I want this blank space to be divided between the beginning and the end of the "row" - I want the "row" to be "centered" (or at least "justified"). And I don't know how to do it.

Adding "margin:0 auto;" would give effect only if "float:left" is removed, and that means there would be only ONE element in a row (and yes, that element would be centerd). That is not what I want.

So, is there any way to solve this problem?..
Webmasterworld's forum is my last hope... :-(

[edited by: Twilight at 11:50 am (utc) on Sep. 16, 2007]

[yannis]

Remember all image elements are in-line, so you will need to tell the browser to display it as a block. Add display:block. Remember to also take all padding away at first to make it easier for bad browsers like Internet Explorer.A centered image has equal left and right margins i.e margin:0 auto; You will need to first float all images left or right.

.element_img_box
{
display:block;
margin:0;padding:0;
margin:0 auto;
width: 150px;
height: 154px;
float:left;
}

Set the main container at no width and let it pick up the width automatically.

This I did not understand what it does. Is this the wrapper element?
Vertical-align will only work with tables or display:table-cell.

.element
{
text-align:center;
width:150px;
height:300px;
color:#F63;
font-weight:bold;
vertical-align:top;
padding-left:5px;
padding-right:5px;
float:left;
}

Rather use this.

.wrapper_element{
margin:0;padding:0;
width:auto;margin:0 auto;

}

Yannis

[Twilight]

Remember all image elements are in-line

oh... thank you, I did know that.

Thanks for your reply, yannis. I've already found the solution :)