It is necessary to align the text vertically. The height varies depending on a set of letters, words. It would be very nice if single-line text were at the icon level.
In Russian, all in one line and just great.
I leveled only in height through flex .
.navigation-restaurant { background: #e6eaf4; padding: 22px 0 12px; margin-bottom: 45px; } .display-flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .navigation-restaurant .item-1, .navigation-restaurant .item-10, .navigation-restaurant .item-11, .navigation-restaurant .item-12, .navigation-restaurant .item-2, .navigation-restaurant .item-3, .navigation-restaurant .item-4, .navigation-restaurant .item-5, .navigation-restaurant .item-7, .navigation-restaurant .item-8, .navigation-restaurant .item-9 { background-position: 11px center; background-repeat: no-repeat; } .display-flex>div { display: -webkit-flex; display: -ms-flexbox; display: flex; } .dropdown-menu.navigation-restaurant a, .navigation-restaurant a { border-radius: 1px; padding: 10px 0 9px 24px; text-align: center; text-transform: uppercase; } .navigation-restaurant .item-1 { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PmACYb4AAACaSURBVHjaYvj////h/+SDw4wgkoECwILEZiRRL9hiJgYKAbEG+AHxQuzuQAAGJCyAxHYC4p9QNa5I4nBN6AaIAvFNIK4CYnMg/gSVr0CzBKcBukD8ASr2GUp3omnGawAI2wHxV6j4TCBmJNUAEPYB4sVAzIxFDq4POSGRlQ5Y0AUIGPaf3HRAcUIiKi/gdSo+FxyhwAFHAQIMAF5mYMaNa8tNAAAAAElFTkSuQmCC'); background-position: 11px center; background-repeat: no-repeat; } .navigation-restaurant a { display: block; width: 100%; vertical-align: middle; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; margin-left: 5px; padding-right: 5px; background-position: 7px center !important; } .navigation-restaurant .item-1, .navigation-restaurant .item-10, .navigation-restaurant .item-11, .navigation-restaurant .item-12, .navigation-restaurant .item-2, .navigation-restaurant .item-3, .navigation-restaurant .item-4, .navigation-restaurant .item-5, .navigation-restaurant .item-7, .navigation-restaurant .item-8, .navigation-restaurant .item-9 { background-position: 11px center; background-repeat: no-repeat; } .navigation-restaurant a { display: block; width: 100%; vertical-align: middle; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; margin-left: 5px; padding-right: 5px; background-position: 7px center!important; } .navigation-restaurant a { background-color: #799fc3; color: #fff; font-weight: 700; font-size: 11px; margin: 0 0 11px; } .dropdown-menu.navigation-restaurant a, .navigation-restaurant a { border-radius: 1px; padding: 10px 0 9px 24px; text-align: center; text-transform: uppercase; } .navigation-restaurant .active:hover { background-color: #3e516c; } .navigation-restaurant .active { background-color: #455a78; } .navigation-restaurant a:hover { background-color: #638fb9; }/ png; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw / eHBhY2tldCBiZWdpbj0i77u / IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 + / PmACYb4AAACaSURBVHjaYvj //// h / + SDw4wgkoECwILEZiRRL9hiJgYKAbEG + AHxQuzuQAAGJCyAxHYC4p9QNa5I4nBN6AaIAvFNIK4CYnMg / gSVr0CzBKcBukD8ASr2GUp3omnGawAI2wHxV6j4TCBmJNUAEPYB4sVAzIxFDq4POSGRlQ5Y0AUIGPaf3HRAcUIiKi / gdSo + FxyhwAFHAQIMAF5mYMaNa8tNAAAAAElFTkSuQmCC');.navigation-restaurant { background: #e6eaf4; padding: 22px 0 12px; margin-bottom: 45px; } .display-flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .navigation-restaurant .item-1, .navigation-restaurant .item-10, .navigation-restaurant .item-11, .navigation-restaurant .item-12, .navigation-restaurant .item-2, .navigation-restaurant .item-3, .navigation-restaurant .item-4, .navigation-restaurant .item-5, .navigation-restaurant .item-7, .navigation-restaurant .item-8, .navigation-restaurant .item-9 { background-position: 11px center; background-repeat: no-repeat; } .display-flex>div { display: -webkit-flex; display: -ms-flexbox; display: flex; } .dropdown-menu.navigation-restaurant a, .navigation-restaurant a { border-radius: 1px; padding: 10px 0 9px 24px; text-align: center; text-transform: uppercase; } .navigation-restaurant .item-1 { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+/PmACYb4AAACaSURBVHjaYvj////h/+SDw4wgkoECwILEZiRRL9hiJgYKAbEG+AHxQuzuQAAGJCyAxHYC4p9QNa5I4nBN6AaIAvFNIK4CYnMg/gSVr0CzBKcBukD8ASr2GUp3omnGawAI2wHxV6j4TCBmJNUAEPYB4sVAzIxFDq4POSGRlQ5Y0AUIGPaf3HRAcUIiKi/gdSo+FxyhwAFHAQIMAF5mYMaNa8tNAAAAAElFTkSuQmCC'); background-position: 11px center; background-repeat: no-repeat; } .navigation-restaurant a { display: block; width: 100%; vertical-align: middle; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; margin-left: 5px; padding-right: 5px; background-position: 7px center !important; } .navigation-restaurant .item-1, .navigation-restaurant .item-10, .navigation-restaurant .item-11, .navigation-restaurant .item-12, .navigation-restaurant .item-2, .navigation-restaurant .item-3, .navigation-restaurant .item-4, .navigation-restaurant .item-5, .navigation-restaurant .item-7, .navigation-restaurant .item-8, .navigation-restaurant .item-9 { background-position: 11px center; background-repeat: no-repeat; } .navigation-restaurant a { display: block; width: 100%; vertical-align: middle; word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; margin-left: 5px; padding-right: 5px; background-position: 7px center!important; } .navigation-restaurant a { background-color: #799fc3; color: #fff; font-weight: 700; font-size: 11px; margin: 0 0 11px; } .dropdown-menu.navigation-restaurant a, .navigation-restaurant a { border-radius: 1px; padding: 10px 0 9px 24px; text-align: center; text-transform: uppercase; } .navigation-restaurant .active:hover { background-color: #3e516c; } .navigation-restaurant .active { background-color: #455a78; } .navigation-restaurant a:hover { background-color: #638fb9; }
<div class="navigation-restaurant hidden-xs"> <div class="container"> <div class="row display-flex"> <div class="col-md-3 col-lg-2 col-sm-3"> <a ui-sref="rest.reservation" ui-sref-active="active" class="item-1" ng-style="{'background-color': $ctrl.countReservations > 0 ? 'red' : ''}" href="/rest/reservation" style="background-color: red;">Reserveerimisteated(1)</a> </div> <div class="col-md-3 col-lg-2 col-sm-3"> <a ui-sref="rest.delivery-food" ui-sref-active="active" ng-style="{'background-color': $ctrl.countDeliveries > 0 ? 'red' : ''}" class="item-4" href="/rest/delivery-food" style="background-color: red;">Toidu kohaletoimetamine (1)</a> </div> <div class="col-md-3 col-lg-2 col-sm-3"> <a ui-sref="rest.map" ui-sref-active="active" class="item-10" href="/rest/map">Restoran kaardil</a> </div> <div class="col-md-3 col-lg-2 col-sm-3" style=""> <a ui-sref="rest.information" ui-sref-active="active" class="item-1 active" href="/rest/information">Info</a> </div> <div class="col-md-3 col-lg-2 col-sm-3"> <a ui-sref="rest.menu-delivery" ui-sref-active="active" class="item-11" href="/rest/menu-delivery">Kohaletoimetamise menüü</a> </div> <div class="col-md-3 col-lg-2 col-sm-3"> <a ui-sref="rest.photo" ui-sref-active="active" class="item-9" href="/rest/photo">Teie Fotod</a> </div> <div class="col-md-3 col-lg-2 col-sm-3"> <a ui-sref="rest.discount" ui-sref-active="active" class="item-6" href="/rest/discount">Allahindlused ja aktsioonid</a> </div> </div> </div> </div> 
align-items: center? - diraria