Current filter:
                                You should refresh the page.
                                  • I am using an ImageGallery extension on my site (see https://www.st-andrews.club/event/15).

                                    I want the items to flow (like they are currently), but I would also like them to be centered in the form.  What is the easiest way of accomplishing this?

                                Show all comments
                                • Lanette (DevExpress Support) 03.28.2016

                                  Hello William,

                                  Currently, your task is not completely clear. Do you mean that you need to center the view which contains all items on the page? Or you need to modify the alignment of an individual item? Please describe your task in greater detail and send us a picture of the incorrect layout which you need to center. If possible, also send us your page code so that we can examine your ImageGallery configuration and layout. This will help us provide you with the most suitable solution.

                                • William Yeack 09.15.2019

                                  I'm finally coming back to this.  I want to center all of the items in the middle of a container.  See here for an example:
                                  https://williambeaver.member.buzz/event/1196

                                • Helen (DevExpress Support) 09.16.2019

                                  Hi William,
                                   
                                  Your task is still not clear. As I can see, image galleries on both pages look rather similar and both are aligned to center horizontally. See the attached screenshots.
                                  Would you please describe the expected layout in greater detail or send us a picture illustrating it?

                                • William Yeack 09.17.2019

                                  Does this help clarify things?

                                • Helen (DevExpress Support) 09.18.2019

                                  Hi William,
                                   
                                  Yes, I see the issue now. To give you the most efficient solution, I need to research this behavior on my side. Would you please send me a runnable test project for this? You can modify my sample from the ImageGallery - Unable to change number of items initially loaded when Layout is set to Breakpoints thread.
                                   

                                • William Yeack 09.19.2019

                                  Hi Helen,
                                  You pretty much just need ot change the Layout to Flow and put the partial view in a container with an explicit width - see attached project!

                                1 Solution

                                Creation Date Importance Sort by

                                Hello,
                                A flow layout does not support this capability out of the box. As a workaround, you can change ImageGallery behavior using custom CSS classes. See the How to implement CSS-related solutions for DevExpress components thread. However, the last row alignment may be different based on the width of ImageGallery in this case. Attached is a sample project that demonstrates this solution.
                                 

                                • William Yeack 09.20.2019

                                  Yea I know how to do custom CSS - the problem is that the way the flow layout works is super strange and I couldn't figure out what styles to change - would you mind offering some guidance?

                                • William Yeack 09.20.2019

                                  Sorry I didn't see the attached project - any idea on how to center the last row as well?

                                • Nataly (DevExpress Support) 09.23.2019

                                  You can do this by increasing margins. Modify the CSS rule as follows:
                                   

                                  [CSS]
                                  .dxigFlowItem_DevEx { float: none !important; margin-left: 10px !important; }

                                   
                                  Attached is a video that demonstrates the resulting behavior.