html - Vertically Center in Twitter Bootstrap

Question

I'm using Bootstrap in order to create a notification-like drop down when the user mouseovers the bell icon (font-awesome). The menu is created alright, each element inside the menu is indicated by a red chevron sign. I'm not able to center the chevron vertically and align the text to the right of the chevron to start from the same place (there's some margin at the beginning of each line). I cant vertically center the chevron with a fixed value because the length of the string inside the container can be different and the position of the chevron should be determined dynamically.

Basically, I'm creating a jQuery element

$("<div class='notification-content'><i class='ion-chevron-right'></i><span class=''>"+randromString+"</span></div>");`,

and the chevron is inserted with the content.

JSfiddle here.

HTML

<div class="notifications_wrap text-center center b-l b-r hidden-sm hidden-xs">
   <span class="vlign"> </span>
   <a href="#" id="notification-center" aria-haspopup="true" data-toggle="dropdown">
   <i class="glyphicon glyphicon-bell"></i>
   <span class="bubble "></span>
   </a>
   <div class="dropdown-menu notification-toggle1" role="menu" aria-labelledby="notification-center" id="notif">
      <!-- START Notification -->
      <div class="notification-panel">
         <div class="test"></div>
      </div>
   </div>
</div>

CSS

#notif{
    background-color: white;
    color: black;
}

.notification-content{
    text-align: left;
    padding: 10px;
    padding-right: 25px;
    border-bottom: 1px solid #ddd;
    transition: 0.4s ease;
}

.notification-content:hover{
    color: #48B0F7;
}

.notification-toggle1 {
    top: 75px;
    padding: 0;
    z-index: 9999;
    left: 100px;
    width: 250px;
}

/*    > sign of the notification*/
.notification-content >.ion-chevron-right:before {
    color: red;
/*   display:inline-block;*/
    vertical-align: middle;
    line-height: 50%;
    width: 50px;
    height: 20px;
}

.notification-content>span{
    position: relative;
    left: 15px;
}

JS

  $(".notifications_wrap").find("a").mouseover(function(){
        $(".notification-content").remove();
        var random_i=randomNumOfNotifs();
        for(var i=0;i<random_i;i++){
            var randromString = stringGen(randomLength());
            var notification = $("<div class='notification-content'><i class='ion-chevron-right'></i><span class=''>"+randromString+"</span></div>");
            $("#notif").append(notification);
        }

        $("#notif").animate({height:"show"},500);
    });

Answer 1

You can add the following css:

.notification-content >.ion-chevron-right {
    display:table-cell;
    vertical-align:middle;

}

.notification-content>span{
    display:table-cell;
}

Here is a fiddle