0

В шапке есть элементы профиля с двумя ссылками-картинками, как можно их выровнять во вертикали?

header {
height: 100px;
background-color: #e8e8e8;
}

header .profile-menu {
float: right;
margin-right: 15px;
}

ul {
list-style: none;
}

li {
display:inline-block;
}
<header>
<div class="profile-menu">
    <ul>
         <li><a href="/"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkQzMUEzODg1NEI2MTFFNUE3REFCNDgwQkU3OThBRTgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkQzMUEzODc1NEI2MTFFNUE3REFCNDgwQkU3OThBRTgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmRpZDowMDJFMkMyMEI2NTRFNTExOUY4OThBRTgyNDM3M0RGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMDJFMkMyMEI2NTRFNTExOUY4OThBRTgyNDM3M0RGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PouecQEAAACkSURBVHjafJJNCsIwEIVna3sDsdBDVfGnFRER1AMIbvTYSgPjPJlFGF8a+EqSvi/J4omq3o2ZcTaS8jEaB889xSfibIgIocsyFT6nbANsMzEK4CYeWBPxTYQ98uInMnHBBPWFToh/QpQwPsY8CK3vK5Nw0rJw047dxISmJEpBGPxJKyZicgw/+uwpiYjX2IieNCKKv0Y8jNq4THQveXOQe30FGACUY0axShRP7QAAAABJRU5ErkJggg==" alt="" /></a></li>
         <li><a href="/"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTczQTNGNkNEMzc0MTFFNEJEQ0U5MEI1NTJDRjY1QjUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTczQTNGNkREMzc0MTFFNEJEQ0U5MEI1NTJDRjY1QjUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1NzNBM0Y2QUQzNzQxMUU0QkRDRTkwQjU1MkNGNjVCNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1NzNBM0Y2QkQzNzQxMUU0QkRDRTkwQjU1MkNGNjVCNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrkimIIAAAMAUExURdje5tfd5d3i6drf5tne5dzh5+Tp76i3x7/K1tTc5dng6NXc5NTb49/l7N7k69je5dfd5KO0xqKzxaO0xaS1xq++za28y7TC0LLAzrrH1L7K1r3J1cXQ28nT3dff59be5tXd5d3k69jf5tbd5NXc4+Dm7N/l6+Hn7aGzxKCyw6O1xaK0xKGzw6S2xqa3x6S1xai4x6++zK69y7bE0bXD0LTCz7fE0LbDz8LO2cfS3KK1xaG0xKCzw6O1xKW3xqS2xaa3xqW2xam6yai5x629y7LCz7XE0bPCz73K1dnh6Njg59ff5tbe5d/m7N3k6tzj6ePp7tnh5wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALanA6cAAAEqSURBVHja7NRrU4JAFAZgMu2eVmJpF8iK9tiLld0Ti/JSaZb6//9Mu6Ar08zG9q1meD+xDM/Me4YDBvt1jIQk5F+QbslvuEEafqmrQwZNl7xxyG0O4km5SIiEiuWfSL8mCnnAiQzgiYK1voK0eSNEQYjA+7UVBFFAFEVQEJLA3JtJp9fuTYlIQbyJuMjNBsltTowXQ8yDzNHt/PnNYcYw9Qh2Uytn4k0+LafuoEes7LWYCu5WdlGP0LHzEPZ5dj5Jh4A+nPHUPlsl6BDY7DUkl2wfemSB2VVxdbrEdjTHX++x96vq44vF7A1NglYvvGG3oEf4A/lti4M3uXKxROxUhWe6c0pSR2R5g8hzXUEK+Gamp4KCjDpQpDNSffvDOUWGyT85IX+cfAkwAI0+gqozX2r1AAAAAElFTkSuQmCC" alt="" /></a></li>
</ul></div></header>

https://jsfiddle.net/mx6587rn/

1 ответ 1

1

В вашем случае достаточно добавить обоим элементам

vertical-align: middle;

https://jsfiddle.net/ipshenicyn/g3L6mt9f/2/

3
  • Отступы все равно разные, надо центрировать их не относительно друг-друга, а относительно самой шапки prntscr.com/c8v9n9
    – Fangog
    Commented 22 авг. 2016 в 11:36
  • @Fangog когда элементы выровнены относительно друг друга, нет никакой проблемы поднять их выше или опустить. Паддинги или марджины любому родителю решают все вопросы. Обновил ссылку в ответе. И тогда ваш вопрос должен звучать не "выровнять", а "центрировать". Commented 22 авг. 2016 в 11:40
  • Имеет ли смысл использование списка в данном контексте? Commented 23 авг. 2016 в 8:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.