Vertical Align Table-Cell Don't Work with Position Absolute

<style>.th{position:absolute;border:none}.th2 {   height:100px;    width:300px;    background-color:green;    display: table-cell;    vertical-align:middle;    left:-200px;    position:relative;}.tbl{ margin-left: 305px;}td{height:100px;width:200px;vertical-align:bottom; }</style>
<table class=tbl border=3 > <tr >  <td class=th> <div class=th2>text1</div></td>  <td>text2</td>  <td>text3</td>  <td>text4</td> </tr> </table>

Vertical align table-cell don't work with position absolute

Everything works as expected until I add "position: absolute". Now it
can't place my content in the middle any more? Why not?

position: absolute forces display: block, read number two here.

As for a workaround, I think you'll have to wrap it in another element:

<div class="table-cell-wrapper">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>

.table-cell-wrapper {
    position: absolute;
}
.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
}

Vertical Align with Absolute Positioning

add a parent div with display:table and height:100% to .table-cell will fix this

So the html structure wil be :

   <div class="middle">
        <div class="table">
           <div class="table-cell">
               <p>test</p>
           </div>
        </div>    
  </div>

add this Style:

#sidebar .table{
   display:table;
   height:100%;
}

See jsfiddle I have modified

Why does `vertical-align` property NOT work for a with `display:table-cell`?

2 issues :

Height

Your first-viewport has a height of 100%. When you work with % heights, know that the parent must have a height to so the % height of the children can be calculated.

In this case, you have to add html, body {height: 100%;}, which are the parents of first-viewport. (Honestly, it's not mandatory but you should do it as your div could have a zero height on some browsers.)

Background

Now, your <a> tags are actually taking the full height and are centered vertically, but you feel the opposite because of your background.

Now what you have to do is fixing your background position (since you're using the background property to display arrows).

a.previous-slide-arrow, a.next-slide-arrow {
    background-position: center;
}

This simple line above should fix it.

Vertical-align middle with display table-cell not working on images

Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).

So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)

If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/

(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)

But there are other ways to do this (SO has many answers to this question, just use search)

Vertical-align middle with display table-cell not working on images

Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).

So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)

If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/

(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)

But there are other ways to do this (SO has many answers to this question, just use search)

Vertical alignment in CSS with position: absolute

I tried to reply at what I understand to your questions.
However, if you have an image result of what you want, it will be easier to us to give you the code or tell you how to achieve what you want.

Here is the JSFIDDLE where I put your questions answer.

Questions
1) removing position: absolute from container2's child makes the text align to the bottom (as expected from vertical-align: bottom). why?
2) container3's  child,child,child span only gets clipped clipped by the first ancestor which has overflow:hidden AND position:something. why is position required?
3) container4's child does not stretch vertically unless position: absolute is set (position: relative will not do anything).
4) container4's child's height: 100% will use the first parent that has a position set. why not the first parent's content height?
5)container4's child has vertical-align: bottom set. But its text is not aligned to the bottom (unlike in container1 where parent has display: table and child has display: table-cell.

Answers

    1)
    On your css, you can reveiw that .container2 .child and .child css is applicated to your class, so removing only one vertical align on one class will still stick the table content to the bottom because .container2 .child is display as table cell

    2)
    I don't understand your question, what don't you don't understand?
    If you have an image result of what you want, I can code it and you will learned from it.


    3)
    Inside a table, everything is managed differently, you need to define how to display your content. You need to aply display: block to .container4 .child 

    4)
    Because you have the choice =)
    So set the parent position of the item that you want


    5)
    Because you forgot to add .container4 .parent {display: table;} and .container4 .child {display: table-cell;}

Hope this help =)

---

Related Topics