css drop down list align img and text - html

Question

I have a problem in my css that I can figure it out, I need to align the text and the img in my drop down list in the center.
The igm looks in center but the text is a bit lower.
I want also to make the text a bit far from the img
Any help ?
This is what I get
I deleted alot of source code CSS to be able to publish the auestion, I hope my issue is not in what I deleted.
HTML
<section class="main">
<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2">
<span>Deutsch</span>
<ul class="dropdown">
<li><img src="./images/flags/flags_iso/32/de.png" >Deutsch</li>
<li><img src="./images/flags/flags_iso/32/en.png" >English</li>
<li><img src="./images/flags/flags_iso/32/fr.png" >Français</li>
<li><img src="./images/flags/flags_iso/32/es.png" >Español</li>
</ul>
</div>
​</div>
</section>
CSS
/* DEMO 2 */
.wrapper-dropdown-2 {
/* Size and position */
position: relative; /* Enable absolute positionning for children and pseudo elements */
width: 200px;
margin: 0 auto;
padding: 10px 15px;
/* Styles */
background: #fff;
border-left: 5px solid grey;
cursor: pointer;
outline: none;
}
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.wrapper-dropdown-2 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: -5px;
right: 0px;
/* Hiding */
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
}
.wrapper-dropdown-2 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* Active state */
.wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-2 .dropdown,
.no-pointerevents .wrapper-dropdown-2 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-2.active .dropdown,
.no-pointerevents .wrapper-dropdown-2.active .dropdown {
display: block;
}

Answer 1

Try using
.wrapper-dropdown-2 .dropdown li a img{
vertical-align:middle;
}

Answer 2

Sorry I can only answer, I do not have enough points to comment. It looks like your flag images have a bigger height than the text. Therefore this will increase the height of the div that contains the flag and the text.
[]
[]English
Above, the 4 square brackets represent the flag. This is what is happening. Whereas if they were the same size:
[]English

Answer 3

.dropdown li a
{
display: inline-block;
line-height: 18px;
}
.dropdown li img
{
float: left;
margin-right: 5px;
}