Вертикальный центр в 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.