In the header there are profile elements with two links-pictures, how can you align them vertically?

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

    In your case, it is enough to add both elements.

     vertical-align: middle;

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

    • The indents are still different, it is necessary to center them not relative to each other, but relative to the cap itself prntscr.com/c8v9n9 - Fangog
    • @Fangog when elements are aligned relative to each other, there is no problem raising them higher or lowering them. Paddings or margins to any parent solve all questions. Updated the link in the answer. And then your question should sound not “align”, but “center”. - Ivan Pshenitsyn
    • Does it make sense to use the list in this context? - Evgeny Borisov