Я использую Bootstrap для того, чтобы создать раскрывающийся список уведомлений, когда пользователь наводит курсор на значок колокольчика (font-awesome). Меню создано хорошо, каждый элемент внутри меню обозначен красным знаком шеврона. Я не могу отцентрировать шеврон по вертикали и выровнять текст справа от шеврона, чтобы начать с того же места (в начале каждой строки есть поле). Я не могу вертикально отцентрировать шеврон с фиксированным значением, потому что длина строки внутри контейнера может быть разной, и положение шеврона должно определяться динамически.

В основном я создаю элемент jQuery

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

и шеврон вставляется с содержимым.

JSfiddleВот.

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);
    });