[FIXED] How to make "vertical-align:middle" work when parent container specifies "display: table"?

Issue

I was reading here -- CSS vertical-align: middle not working that if the "vertical-align:middle;" property isn't working in CSS, its because the parent container does not have a "display: table;" specified. So I gave this a try in my parent DIV

.btn
{
    position: relative;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    color: #333;
    background:gray;
    display: table;
    vertical-align: middle;
}

but the child element

<span>Start</span>

still aligns at the bottom -- https://jsfiddle.net/xwdnvcy5/35/ . How do I make my span element align vertically in the middle?

Solution

You missed to add display: table-cell in the .btn span style.

    .btn
    {
        position: relative;
        margin-bottom:20px;
        padding: 0 10px;
        text-align: left;
        font-size: 16px;
        color: #333;
        background:gray;
        display: table;
        
    }

    #btn_container
    {
        border-radius:5px;
        background:red;
        position: relative;
        display: inline-block;
    }

    .btn img
    {
        left: 50%;
        margin-left: 0px;
        top: 50%;
        margin-top: 0px;
    }


    .btn span
    {
        vertical-align: middle;
        display: table-cell;
    }

<div id="control" class="btn">

<div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>

<span>Start</span> 

</div> 

Answered By - Nehemiah

Answer Checked By - Mary Flores (PHPFixing Volunteer)