Vertically Align List Disclosure Icon.

[UbuntuPenguin]

Hello Everyone,
I have a list with a custom itemTpl. I would like to have the disclosure icon vertically aligned in the middle of the x-list-item-label(?). I have tried all sorts of CSS voodoo but can't seem to get it to work. Below is the absurdly sized image of what I am talking about. Here is an example of CSS that I tried that failed miserably while the disclosure icon laughed back at me.

.navigation_list .x-list-item
{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    /* The content of the body is horizontally centered */
    -webkit-box-pack: start;
    /* and vertically as well ... \o/ */
    -webkit-box-align: center;
    width: 100%;
    height : 100%;
}


.navigation_list .x-list-item
{
    width: 100%;
}


.navigation_list .x-list-item .x-list-disclosure
{
    vertical-align: middle;
    position: static;
}

Any help is greatly appreciated.

ListDisclosureIconMisbehavior.png

[UbuntuPenguin]

The answer went something like this. The icon is still off center, but I can fight with it to get it right.

.navigation_box
{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    /* The content of the body is horizontally centered */
    -webkit-box-pack: start;
    /* and vertically as well ... \o/ */
    -webkit-box-align: center;
    width: 100%;
    height : 100%;


}
.navigation_image{
    background: #eee;
    background-size: cover;
    background-position: center center;


    width: 80px;
    height: 80px;
}
.navigation_text{
    vertical-align: middle;
    flex : 1;
}


/*.navigation_list .x-list-item*/
/*{*/
    /*display: -webkit-box;*/
    /*-webkit-box-orient: horizontal;*/
    /* The content of the body is horizontally centered */
    /*-webkit-box-pack: start;*/
    /* and vertically as well ... \o/ */
    /*-webkit-box-align: center;*/
    /*width: 100%;*/
    /*height : 100%;*/
/*}*/
.navigation_list .x-list-item
{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}
.x-list-item-label
{
    width: 100pc;
}
.x-list .x-list-item{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
}


.x-list .x-list-disclosure
{
    bottom: 45%;
}

And my template looks like this

        itemTpl: '<div class="navigation_box">' +
                        '<img class="navigation_image" src={ imageLocation }/>' +
                        '<div class="navigation_text">{navigationName}</div>' +
                  '<div>'