SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    back to an old prob: vertical-align:middle

    so what do you have to do to make vertical-align:middle work??

    acc. to this page
    http://www.w3schools.com/cssref/pr_p...ical-align.asp

    setting this property to "middle" should do just that: vertical-align an element to middle (i.e., equal amount of white space above and below element.. for example a div with text inside another div.. in my case content will be inserted dynamically and I don't know how many lines of text it will be; it has to be middle-aligned vertically in all cases..)

    display:table-cell does not work in all browsers, so that's a non-starter..

    I get so sick of this problem.. why can't vertical-align:middle ever work as it should? (like text-align:center; this always works.. why doesn't vertical-align:middle ever work??????)

    thank you..

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    What the page you linked to fails to mention is that the vertical-align property only works with inline elements and not block-level elements. A <div> is a block-level element, so vertical-align can't ever work unless you modify its state, e.g. set its display to a non-block value.

    @Paul O'B ; has some examples on how you can accomplish vertical centering/aligning. See here: http://pmob.co.uk/

    This page has a few examples as well: http://blog.themeforest.net/tutorial...ring-with-css/

    And a good explanation is offered by Chris Coyer here: http://css-tricks.com/what-is-vertical-align/
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by maya90 View Post
    so what do you have to do to make vertical-align:middle work??
    As Maleika said above vertical-align only applies to inline elements (and table-cells). It was never meant to vertically align block elements.

    display:table-cell is the easiest solution and works in IE8+ and all other browsers that are in use. If you want IE7 support then you need to add a hack like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .outer {
    	overflow: hidden;
    	width: 134px;
    	height: 149px;
    	background:#ccc;
    	float:left;
    	margin: 10px;
    	white-space:nowrap;
    	display:table;
    }
    .outer ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    	width:134px;
    	display:table-cell;
    	vertical-align:middle;
    	position:relative;
    }
    .outer li{
    	width:100%;	
    	position:relative;
    }
    .outer li a{
    	display:block;
    	padding:0 10px;
    	background:#666;
    	zoom:1.0;
    	position:relative
    }
    .outer li a:hover{background:red}
    * html .outer ul {top:50%}/* ie6 hack*/
    * html .outer li {top:-50%}/* ie6 hack*/
    *+html .outer ul {top:50%}/* ie6 hack*/
    *+html .outer li {top:-50%}/* ie6 hack*/
    </style>
    </head>
    <body>
    <div class="outer">
    	<ul>
    		<li><a href="#">Link 1</a></li>
    		<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    	</ul>
    </div>
    <div class="outer">
    	<ul>
    		<li><a href="#">Link 3</a></li>
    	</ul>
    </div>
    <div class="outer">
    	<ul>
    		<li><a href="#">Link 1</a></li>
    		<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    		<li><a href="#">Link 3</a></li>
    	</ul>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you know the height of the element to be vertically aligned, you can do this:

    Code:
    <div class="parent">
         <div class="child">
              This is vertically aligned
         </div>
    </div>
    
    .parent {
         height: 500px;
         width: 500px;
         position: relative
    }
    
    .child {
         height: 200px;
         width: 200px;
         position: absolute;
         top: 50%;
         left: 50%;
         margin-top: -100px;
         margin-left: -100px
    }
    The top margin is minus half the child's height, and the left margin is minus half its width.

    Here is a slightly more robust example: http://jsfiddle.net/mfuxt/

  5. #5
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had some great help from Paul O B and Ron Pat on this forum with a vertical alignment problem.

    Their finished output is here http://www.c5d.co.uk/descriptioned11891.php

    If it is anything like what you want, I'll be more than happy to provide you the HTML and CSS. It's the least I can do after what they have done for me

    Antony

  6. #6
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you for your code, Spritanium, & Paul O'B.... and to everyone else for their responses...


    display:table-cell works pretty well, except if div is FLOATED!!! :-)

    my div is floated, as it's adjacent to another div.. display table-cell only works if remove the float:left.... oh brother.... :-(

    thank you....

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by maya90 View Post
    thank you for your code, Spritanium, & Paul O'B.... and to everyone else for their responses...


    display:table-cell works pretty well, except if div is FLOATED!!! :-)

    my div is floated, as it's adjacent to another div.. display table-cell only works if remove the float:left.... oh brother.... :-(

    thank you....
    Hi,

    You'll need to show us some code if you want more specific help.

    You shouldn't need to float the element if using display:table-cell properties because the cells will naturally be adjacent to each other. If using display:table structures you can use display:inline-table for tables aligned next to each other.

    It all does depend on what you are doing though so we would need to see the code.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by kohoutek
    What the page you linked to fails to mention is that the vertical-align property only works with inline elements and not block-level elements.
    Why w3schools.com still needs to get thrown into the trash

  9. #9
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    hmmm... ok, I see, Paul... I would have to change the layout of the entire thing (just two divs side-by-side, actually...;-) from floated divs to display:table-cell..... hmmm... we don't officially support IE7 anymore, but ideally I'd still rather go with a solution that will work in IE7 also....

    thank you....

  10. #10
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    interesting about display:table-cell: it doesn't respect margins!! (of course, td's don't have margins...)

    here are two examples: one with display:table-cell and one with floats...

    table-cell you can do vertical-align:middle, but you can't have a margin..... (I suppose a solution can be found to fix the margin issue..... ;-)


    well, other possibility is to use JS to vertical-align the elements (again, I won't know height of container of dynamic content....), which I actually did already, it works quite well (and the entire thing (my thingie with two divs) depends on JS to show up on the page anyway), but well, still trying to decide (advantage of JS option is it would work in IE7 too.....)

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can control the spacing between cells with border-spacing.

    Code:
    #outer{border-spacing:10px}
    It's not the same as margins but you can get pretty close to what you want. Sometimes it means making the outer stretch wider than you want so that the cells remain the size you wanted.

    If you want older browser support then here a few old examples:

    http://www.pmob.co.uk/temp/vertical-align5.htm
    http://www.pmob.co.uk/temp/vert-align-textandimage3.htm
    http://www.pmob.co.uk/temp/image-overflow3.htm

  12. #12
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    826
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think this about covers it.. thank you everyone very much for your help...

    (and thank you for the border-spacing tip, had forgotten about that one.....)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •