Hey guys,
I got this image gallery:
http://v2.imutz.org/dogs
There are 3 images in every line which are aligned to the center of the page, however when there’s less than 3 images (for example if you scroll down to the bottom of the page) how can I make it so these images will be aligned to the right rather than the center? (but still keep the whole block centered)
Hi there ulthane,
your page appears to have numerous coding errors…
https://validator.w3.org/nu/?doc=http%3A%2F%2Fv2.imutz.org%2Fdogs
…that require your attention. 
I can remember a time when it was common practise,in forums,
not to offer any further assistance until the O.P. had, at least,
made a concerted effort to correct all the coding errors. 
coothead
Oops, yeah, fixed all, thanks 
topic still relevant thought.
I have to say @ulthane that I like the result you have, with the 2 images at the bottom centred.
I like it too, but customer thinks otherwise, customer wins, fatality! 
Change the text-align property of the parent from center. You may want an extra parent wrapper for the gallery to keep the text centred for the rest of the content.
Now it gets tricky. You can’t have it aligned right and centre. You may need to play with the margins of the boxes to make them appear centred.
It’s something I thought maybe flex-box could do, but I have yet to find an way. Maybe when css grid gets full support it can be done.
Well I thought of adding a div that would wrap the galleryboxes elements and then just give it style of display:inline-block;margin:0 auto;text-align:right but for some reason that didn’t work, even when I give it inline-block it still keeps taking 100% of the parent’s width so it doesn’t get centered by margin:0 auto… maybe because parent is a table/table-cell? dunno…
That won’t work. margin: 0 auto will centre a block element. It will not centre an inline or inline-block. Keep it as block to centre the container, use text-align to align the contents and margins to try and space them evenly in the container.
Hi there ulthane,
try it like this, perhaps…
<div id="content" class="adopt">
<div id="contentInner">
<h2>הכלבים שלנו</h2>
<p>כולם בעלי שבב אלקטרוני, מחוסנים בחיסון כלבת ומשושה, הנקבות מעוקרות והזכרים מסורסים.</p>
<p>האימוץ כרוך בתשלום מסובסד עבור עיקור/סירוס וחיסון כלבת/משושה.</p>
<img src="/images/albums/461/85840914t1476944378.jpg" style="display:none" />
...
...
...
<div class="gallerybox"><a title="שארל החתיך לאימוץ" href="/pet-84"><div><img style="width:390px;height:auto;margin-left:-65px"" title="שארל החתיך לאימוץ" alt="שארל החתיך לאימוץ" src="/images/albums/84/1334818191t1456554185.jpg" data-src="/images/albums/84/1015481651t1456554185.jpg" data-style="width:390px;height:auto;margin-left:-65px"" onmouseover="toggleSrc(this);" onmouseout="toggleSrc(this);"></div><p>שארל החתיך</p></a></div>
<div class="gallerybox" style="width:260px;"></div>
</div>
</div>
coothead
Hey, thanks for the suggestion, but that will work only with fixed numbers of elements per line.
I got fluid layout, if you zoom in there will be 2 elements per line, zoom in further and there will be only 1.
@SamA74 I tried with a display block wrapper and didn’t see how that could work out, the block element still takes 100% width so I got no way to center the elements inside it the way I want, also I don’t get why if I add a wrapper with display:inline-block it takes 100% width in the first place.
Because it contains inline blocks, they will just line up until they run out of space before wrapping to another line.
All block elements will default to full width. If you want a lesser width, define it with max-width.
Hi there ulthane,
I see no problems with either zoom or page width. 
Here are images for various page widths…
3.
coothead
Heya,
Thanks for the reply, I was pretty sure there are corner cases for going with such a method, but i’ll evantually use it and if there will be any problems i’ll just post back.
Thanks 
Hi, ulthane.
If you are willing to assign Content widths with media queries, it’s fairly easy to center it and right align the galleryboxes.
Curious to know why the galleryboxes are assigned ltr instead of rtl. The latter seems like it would be more natural for you.
For the sake of simplicity, wouldn’t it be easier if someone would crop the images so they have a 1:1 aspect ratio and show the desired content. The actual width and height would not matter, only that the be the same (1:1).
Heya @ronpat
I understand what you mean about media queries but nah, it would require me to add about 2 (?) media queries assiging different widths as screen shrinks, I think coothead suggestion should work better.
About LTR instead of RTL, there seems to be a bug where negative margin-left has no effect in RTL, therefore I had to change to LTR.
About last point, well, I already made all the calculations needed to make them perfectly aligned so nah, if that could avoid someone from working on the images manually then why not? ;p
Coothead’s suggestion is so simple it’s genius !!!
You could create as many media queries as you wish. The only property each one would contain would be the width of the page… one entry. There doesn’t seem to be a need to limit the width of the dogs page on a wide screen monitor. More width means more pups can fit on the screen at once. I can see 3 up and 7 across on the 1920x1080 screen without scrolling.
I’m not so sure there is a margin-left bug. When the document is styled to use direction:rtl, the right edge is the base edge instead of the left; therefore, one should use margin-right instead of margin-left. Do you have an expample of a bug that I can play with?
Hi @ulthane,
Then you could fake an extra image for the last row of one or two images. If you change the number of items in the rows to four or more there are other options to fill the last row.
Try adding a pseudo element after and give it the same width and it will align the items in the last row as if it were full (it now is).
#contentInner::after {
display: inline-block;
margin: 0 0 0 10px;
width: 260px;
height: 1px;
overflow: hidden;
content: " ";
}
You already got some working solutions, but there are always more options than you first see.
Hope I’ve understand the problem correctly.
I agree, loose the media queries and let the width by dynamic.
Then with the solution suggested by @coothead in post #9, add more empty galleryboxes to fill the last row. With zero height they wont affect the display other than filling the last row of items.
Thanks everyone, I already added coothead suggestion
@ronpat about RTL/LTR, you are right, I can change to RTL and then use margin-right, but I still must support LTR in some places, for example I use in some places in my website bxslider plugin, which doesnt render properly if the parent has direction RTL, so I must either give my galleries LTR to support bxslider or give each element inside bxslider direction RTL to support my galleries, i’d preffer to keep something I have full control over in LTR rather than changing bxslider and hope nothing breaks
Here’s an example of page with bxslider where I use the same technique to center images inside the slider, lose the LTR from ‘Content.pet’ element and see what happens:
http://v2.imutz.org/pet-456