5 Replies Latest reply: Aug 9, 2012 2:36 PM by FatBoyAl RSS

    Easy way to center content in a fluid grid div?

    FatBoyAl Community Member

      I've got some images in a fluid grid that work fine in the smaller sizes - they fit perfectly. But in the 'desktop' view, they are much too small and I'd like to just center them in the div.

       

      I've read - or seen a tutorial - or heard in my sleep, I really don't remember where... but you're not supposed to mess with margains in the fluid grid page. Since I'd normally use auto to do that... is there an easy way to center the content in the column?

       

      Yes, I'm new, but at least I try 100 ways first before I ask every question!!

        • 1. Re: Easy way to center content in a fluid grid div?
          mytaxsite.co.uk MVP

          FatBoyAl wrote:

           

          I've got some images in a fluid grid that work fine in the smaller sizes - they fit perfectly. But in the 'desktop' view, they are much too small and I'd like to just center them in the div.

           

          I've read - or seen a tutorial - or heard in my sleep, I really don't remember where... but you're not supposed to mess with margains in the fluid grid page. Since I'd normally use auto to do that... is there an easy way to center the content in the column?

           

          Yes, I'm new, but at least I try 100 ways first before I ask every question!!

           

          If you post a link to your test page then you are likely to get quicker response here.  People need to see your page structure to give you a suggestion.

           

          Good luck.

          • 2. Re: Easy way to center content in a fluid grid div?
            Community Member

            Just use the tag <  align="middle"> for the img. hopes that help you.

            • 3. Re: Easy way to center content in a fluid grid div?
              FatBoyAl Community Member

              Thanks but I don't have the page up as yet. If I were to include code sections - could I just copy/paste the relevant pieces from css and html?

               

              And the align=middle.... I looked it up and don't see that tag available - and in any event, it didn't change things. Surprisingly, I even did the auto margains trick and though it showed on the tag inspector, overriding the other margain settings, it did nothing to change the alignment. I'm focusing too much on this right now and need to get back to overall development (and learning).

               

              If anyone has any other suggestions, I'm certainly willing to try. I just don't see a lot on the fluid grid layouts in the tuts or here in the forums.

              • 4. Re: Easy way to center content in a fluid grid div?
                mytaxsite.co.uk MVP

                FatBoyAl wrote:

                 

                Thanks but I don't have the page up as yet. If I were to include code sections - could I just copy/paste the relevant pieces from css and html?

                 

                 

                OK  no problem.  Can you post the code here (both HTML and CSS) so that we can create the page on our system and then give you the solution.  To post the code use Advanced Editor

                 

                2012-08-09_2121.png

                 

                When you click the Advance Editor button, your screen will look liook like this:

                 

                2012-08-09_2123.png

                 

                Click on the arrows and you will be able to post the code here.

                 

                Good luck.

                • 5. Re: Easy way to center content in a fluid grid div?
                  FatBoyAl Community Member

                  It was actually simpler than I was making it - change display to block, apply the margain: auto. Simple.