Вертикальный центр в Twitter

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

В принципе, я создаю элемент jQuery

$("<div><span>"+randromString+"</span></div>");`,

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

JSfiddle здесь.

HTML

<div>
 <span> </span>
 <a href="#" id="notification-center" aria-haspopup="true" data-toggle="dropdown">
 
 
 </a>
 <div role="menu" aria-labelledby="notification-center" id="notif">
 <!-- START Notification -->
 <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());" notification="$(" <div"=""><span>"+randromString+"</span>");
 $("#notif").append(notification);
 }
 $("#notif").animate({height:"show"},500);
 });
</random_i;i++){>
1 ответ

Вы можете добавить следующие css:

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

}

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

Вот fiddle

licensed under cc by-sa 3.0 with attribution.