I have an imagefield with multiple images.
Normally these images are placed under each other. I want to place to images next to each other, horizontally centered on the page.
To place the images next to each horizontally I used this css:
.field-field-extra-images .field-item {
width: 175px;
float: left;
margin-top: 15px;
margin-bottom: 10px;
}
This is the html code that firebug gives me for the imagefield containing 2 images:
<div class="field field-type-filefield field-field-extra-images">
<div class="field-items">
<div class="field-item odd">
<a class="lightbox-processed" rel="lightbox[field_extra_images][Cryos Card]" href="http://localhost/drupal/sites/default/files/extra_images/cryos_card.jpg">
<img height="100" width="132" title="Cryos Card" alt="Cryos Card" src="http://localhost/drupal/sites/default/files/imagecache/fixed_height_100/extra_images/cryos_card.jpg"/>
</a>
</div>
<div class="field-item even">
<a class="lightbox-processed" rel="lightbox[field_extra_images][head]" href="http://localhost/drupal/sites/default/files/extra_images/cryos_head.jpg">
<img height="100" width="115" title="head" alt="head" src="http://localhost/drupal/sites/default/files/imagecache/fixed_height_100/extra_images/cryos_head.jpg"/>
</a>
</div>
</div>
</div>I have tried to add a css class to center the row of images:
.field-field-extra-images {
width: 700px;
margin:0 auto;
}
But the images remain at the left. I thought that putting the parent div to the center would move its children (which are floating left) also to the center.
How can align this "row" of images to the center? When the imagefield contains 1 image, this image is placed centered. When I have 2 images, they are placed next to each other centered on the page, etc....
Thx!
Comments
You are correct. I just tried
You are correct. I just tried your CSS and it does create a box in the center of the page with the images aligned left next to each other. Maybe some of the surrounding elements are messing with these. Or maybe you have some other classes that are inherited with (eg. position:absolute could mess this up.)
Are the images aligned outside the container div?
Have you checked the inherited css with firebug?
Adjust parent container width to image(s)
I have found the problem. When I set the width of the parent to 700px I saw no difference because it is too large. When I decrease the width, for example to 300 px, the images move more to the center.
The width of this container should be ignored or adjusted automatically to the width its children need. Its width depends on the number of images the imagefield contains. How can I do this?
btw I use the Acquia Marina theme, which has a fixed width.
Thx for your help!
aha... I didn't try putting a
aha... I didn't try putting a width in there at all.
If you ommit the width attribute I think it should work.
"display: table" makes it work
I tried this:
.field-field-extra-images {
margin: auto;
}
.field-field-extra-images .field-item {
float: left;
margin: 5px 15px 5px 15px;
}
but it did not work, not with firefox 3.5 and not with IE8, the images are still aligned to the left.
Then I added "display: table;" to .field-field-extra-images and this works:
.field-field-extra-images {
display: table;
margin: auto;
}
.field-field-extra-images .field-item {
float: left;
margin: 5px 15px 5px 15px;
}
The only problem is that this "display:table" property is not supported by older browsers, especially IE.
I just used this "display:
I just used this "display: table;" in something where no matter what I did I couldn't center an image. Once I threw that in there though it worked. I'm not an expert on css, so I'm wondering why this worked?
I use this code, but with no
I use this code, but with no success. I put thiscode in the local css in Fusin theme and it don't work.
Could someone help?
This is my site: http://e-oglasi.biz
I want to my images be next to each other.
subscribing
subscribing
does the code mentioned above
does the code mentioned above go in the theme's style.css?
The code goes into local.css
The code goes into local.css of my theme (I use Acquia marina), which overrules style.css.
Still nobody have no solution
Still nobody have no solution for this issue?