Skip navigation
Currently Being Moderated

Why is vertical centering still such a challenge?

Dec 9, 2012 10:44 AM

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

 
Replies
  • Currently Being Moderated
    Dec 9, 2012 6:18 PM   in reply to turner111
     
    |
    Mark as:
  • Currently Being Moderated
    Dec 10, 2012 1:51 AM   in reply to turner111

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 10, 2012 7:22 AM   in reply to pziecina

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points