locked
Vertical align center, how?

    Question

  • I am creating a square div and want to display the word "New" in it and have it centered vertically and horizontally.  How?

    www.emadibrahim.com

    Saturday, July 21, 2012 11:34 PM

Answers

  • Here's an excerpt from the drafts of my book (from the layout chapter that will be out with the next preview)

    .Kraig

    Centering Content Vertically

    Somewhere in your own experience with CSS, you’ve probably made the bittersweet acquaintance with the vertical-align style in an attempt to place a piece of text in the middle of a div, or at the bottom. Unfortunately, it doesn’t work: this particular style only works for table cells and for inline content (to determine how text and images, for instance, are aligned in that flow).

    As a result, various methods have been developed to do this, such as those discussed in http://blog.themeforest.net/tutorials/vertical-centering-with-css/. Unfortunately, just about every technique depends on fixed heights—something that can work for a website but doesn’t work well for the adaptive layout needs of a Metro style app. And the one method that doesn’t use fixed heights uses an embedded table. Urk.

    Fortunately, both the CSS grid and the flexbox (see “Item Layout” later on) easily solve this problem. With the grid, you can just create a parent div with a 1x1 grid and use the -ms-grid-row-align: center style for a child div (which defaults to cell 1, 1):

    <!-- In HTML -->
    <div id="divMain">
        
    <div id="divChild">
            
    <p>Centered Text</p>
        
    </div>
    </div>

    /* In CSS */
    #divMain {
        
    width: 100%;
        
    height: 100%;
       
    display: -ms-grid;
       
    -ms-grid-rows: 1fr;
       
    -ms-grid-columns: 1fr;
    }

    #divChild {
       
    -ms-grid-row-align: center;
       
    -ms-grid-column-align: center;

       
    /* Horizontal alignment of text also work with the following */
        
    /* text-align: center; */
    }

    The solution is even simpler with the flexbox layout, where flex-align: center handles vertical centering, flex-pack: center handles the horizontal, and a child div isn’t needed at all. This is the same styling that’s used in the Fixed Layout App project template to center the ViewBox:

    <!-- In HTML -->
    <div id="divMain">
        
    <p>Centered Text</p>
    </div>

    /* In CSS */
    #divMain {
        
    width: 100%;
        
    height: 100%;
        display: -ms-flexbox;
       
    -ms-flex-align: center;
       
    -ms-flex-direction: column;
       
    -ms-flex-pack: center;
    }

    Monday, July 23, 2012 3:56 PM

All replies

  • Here's an excerpt from the drafts of my book (from the layout chapter that will be out with the next preview)

    .Kraig

    Centering Content Vertically

    Somewhere in your own experience with CSS, you’ve probably made the bittersweet acquaintance with the vertical-align style in an attempt to place a piece of text in the middle of a div, or at the bottom. Unfortunately, it doesn’t work: this particular style only works for table cells and for inline content (to determine how text and images, for instance, are aligned in that flow).

    As a result, various methods have been developed to do this, such as those discussed in http://blog.themeforest.net/tutorials/vertical-centering-with-css/. Unfortunately, just about every technique depends on fixed heights—something that can work for a website but doesn’t work well for the adaptive layout needs of a Metro style app. And the one method that doesn’t use fixed heights uses an embedded table. Urk.

    Fortunately, both the CSS grid and the flexbox (see “Item Layout” later on) easily solve this problem. With the grid, you can just create a parent div with a 1x1 grid and use the -ms-grid-row-align: center style for a child div (which defaults to cell 1, 1):

    <!-- In HTML -->
    <div id="divMain">
        
    <div id="divChild">
            
    <p>Centered Text</p>
        
    </div>
    </div>

    /* In CSS */
    #divMain {
        
    width: 100%;
        
    height: 100%;
       
    display: -ms-grid;
       
    -ms-grid-rows: 1fr;
       
    -ms-grid-columns: 1fr;
    }

    #divChild {
       
    -ms-grid-row-align: center;
       
    -ms-grid-column-align: center;

       
    /* Horizontal alignment of text also work with the following */
        
    /* text-align: center; */
    }

    The solution is even simpler with the flexbox layout, where flex-align: center handles vertical centering, flex-pack: center handles the horizontal, and a child div isn’t needed at all. This is the same styling that’s used in the Fixed Layout App project template to center the ViewBox:

    <!-- In HTML -->
    <div id="divMain">
        
    <p>Centered Text</p>
    </div>

    /* In CSS */
    #divMain {
        
    width: 100%;
        
    height: 100%;
        display: -ms-flexbox;
       
    -ms-flex-align: center;
       
    -ms-flex-direction: column;
       
    -ms-flex-pack: center;
    }

    Monday, July 23, 2012 3:56 PM
  • pretty easy... thanks

    www.emadibrahim.com

    Monday, July 23, 2012 4:11 PM