How to vertically center text span in fixed position div?


Tags: html,css,vertical-alignment

Problem :

I have a div with position: fixed; whose height changes according to height of browser window. And I want to horizontally center text span inside that div. How can I accomplish this using just CSS? (Also, I want to make it IE8 compatible.)

#fixed_div{
    position: fixed;    
    top: 40px; 
    bottom: 40px;
    right: 0px;
    width: 40px;
}

#text_span{
    /* ??? */
}


Solution :

The top: 50% trick won't be precise, since it will be a little lower, there are couple of tricks:

  1. Span position is absolute, top is 50% AND margin-top -> -50% of the span height (can try with %, preferably with the height of the span if it's known).

    #text_span {
        position: absolute;
        top: 50%;
        margin-top: -50%; //or pixels (according to Mr. Green it has to be pixels)
        width: 100%;
        text-align: center;
    }
    
  2. Wrap the span with a div that has display: table, and the span is display: table-cell

    #wrapper-div {
        display: table;
        height: 100%;
    }
    #text_span {
       display: table-cell;
       width: 100%;
       vertical-align: middle;
    }
    

Working fiddle for the table method: (it doesn't work on the fixed element directly, you have to add another element inside) http://jsfiddle.net/a4ndeza5/1/

Hope this helps.


    CSS Howto..

    How to Change XYChart's color in JavaFx?

    How can I apply a CSS class to an element with a given id, without modifying the element?

    How to emulate Google's thick, red underline text decoration

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    How do you align left / right a div without using float?

    How to get rid of spaces with CSS

    How to position many DIVs in CSS

    How to change HTML markup structure using javascript or CSS?

    How to apply CSS to first child div element only?

    Transition animation to show hidden content

    How to place an image and text under it, side by side using HTML and css?

    How do I use this CSS animation in my HTML file?

    How to host html files like css and javascript files

    How to apply background color (or custom css class) to column in grid - ExtJs 4?

    How can I conditionally assign a color to text in jade

    How to highlight the menu item in menu

    How to achieve this layout with CSS and div?

    list-style-type no showing

    how to stack elements using CSS

    How can I make the left div expand and the right div have constant width?

    How to make a radio button look like a toggle button

    How can I get Sitecore Field Renderer to use a css class for an image

    How do I access HTML elements created by a function? The elements are “undefined” and therefore not CSS apply-able

    How do I set the height of an iframe with the min-height property in the body?

    How to change font-size of multiple elements using jQuery

    Clickable dropdowns - How do they work?

    How to see the print media CSS in Firebug?

    How can I change a table's column widths?

    JavaFX how to apply CSS theme

    how to fix buttons on the CSS box