3 Replies Latest reply: Dec 10, 2012 7:22 AM by FeZEC RSS

    Why is vertical centering still such a challenge?

    turner111 Community Member

      Is it really still this tricky to code DW to allow easy vertical centering? Just wondering. Tools for web design have been around long enough, and yet, simply vertically centering an image remains... elusive. Sure - if you know exactly how to do it, or remember it, or figure it out.... sometimes I can get it to work with relative ease; other times, not so much.

       

      Really, though - no vertical center button anywhere?  (I may have missed it.)

       

      Now, I admit, I have some homework to do; in the mean time, though, is there any guide someone can recommend?

       

      I'd like to both center divs vertically as well as center their content vertically, and not necessarily both at the same time... preferably using css.

       

      thanks,

      Andrew

        • 2. Re: Why is vertical centering still such a challenge?
          pziecina Community Member

          Hi

           

          There are a number of simple ways to achieve vertical centring, but a simple 'click the button' will never work as how it can be achieved will depend on the content.

           

          Even on the printed page centring correctly by a simple click is not possible, and printing has been around for over 500 years.

           

          Look at the css3 'flex-box' module, 'Grids' layout module, 'multi-column' module, 'regions' module, 'exclusions' module, to name just a few. Of course they all require you to know the css.

           

          PZ

          • 3. Re: Why is vertical centering still such a challenge?
            FeZEC CommunityMVP

            as to why this is this case is presumably because as the width of an element shrinks, margins-top and position-top and height are contingent on that allowed width.  But margin-top and margin-bottom by default are set to auto. This may make it seem like vertical alignments should occur naturally, but it does not. This is because behind the scenes auto is converted to 0. Meaning that Height auto is automatically set to 100% of its containers height leaving no room for margin-top or margin-bottom.  Vertical formatting of block level normal flow elements, relies on a calculation much like horizontal formatting.  margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom must equal its parenting elements height.    However if you use absolutely positioned elements, then if all three of 'top', 'height', and 'bottom' are not auto: If both 'margin-top' and 'margin-bottom' are 'auto', solve for  top+ margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom +bottom must equal its parenting elements height. Therefore, margin-top and margin-bottom will be equal values thus vertically centering the element.