вертикального выравнивания якорный тег

Question

Я хотел бы вертикально совместите значок на следующем скриншоте с другими элементами:

мне было интересно, если я мог бы найти немного исправить без изменения HTML структуры (I не разработал этот код, я просто отлаживаю). Я попытался использовать свойство vertical-align:middle, но я не смог его исправить.

li { 
    display: inline-block; 
    list-style: outside none none; 
    margin: 0px 0px 11px; 
    padding: 0px; 
} 

label { 
    width:200px; 
    float:left; 
    padding:8px; 
} 

select { 
    border: 1px solid #CBCBCB; 
    float: left; 
    padding: 5px; 
    width: 318px; 
    color: #4F4E4E; 
    font-family: lucida sans unicode; 
} 

<ul> 

    <li> 
     <label for="1_selectLangue"> 
      Langue 
      <span style="color:red">*</span> 
     </label> 

     <select id="1_selectLangue"></select> 

     <a id="boutonLangue"> 
      <img src="ic_enter.png"/> 
     </a> 

    </li> 

</ul> 

JSFiddle: https://jsfiddle.net/aghvyhto/2/

Answer 1

Использование display: inline-block; и vertical-align: middle;, а также удалить float: left; на обоих этикетке и выберите.

ul { 
 
    width:800px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    list-style: outside none none; 
 
    margin: 0px 0px 11px; 
 
    padding: 0px; 
 
} 
 
\t 
 
label { 
 
    width:200px; 
 
    /*float: left;*/ /* Remove this. */ 
 
    padding:8px; 
 
} 
 
\t 
 
select { 
 
    border: 1px solid #CBCBCB; 
 
    padding: 5px; 
 
    /*float: left;*/ /* Remove this. */ 
 
    width: 318px; 
 
    color: #4F4E4E; 
 
    font-family: lucida sans unicode; 
 
} 
 

 
/* Add the following styles. */ 
 
li > * { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<ul> 
 
    <li> 
 
    <label for="1_selectLangue"> 
 
     Langue 
 
     <span style="color:red">*</span> 
 
    </label> 
 
    <select id="1_selectLangue"></select> 
 
     <a id="boutonLangue"> 
 
     <img src="ic_enter.png"/> 
 
     </a> 
 
    </li> 
 
</ul>

Answer 2

Попробуйте

li { 
 
    display: table;/* change display to table */ 
 
    list-style: outside none none; 
 
    margin: 0px 0px 11px; 
 
    padding: 0px; 
 
} 
 

 
label { 
 
    width:200px; 
 
    float:left; 
 
    padding:8px; 
 
} 
 

 
select { 
 
    border: 1px solid #CBCBCB; 
 
    float: left; 
 
    padding: 5px; 
 
    width: 318px; 
 
    color: #4F4E4E; 
 
    font-family: lucida sans unicode; 
 
}

<ul> 
 

 
\t <li> 
 
\t \t <label for="1_selectLangue"> 
 
\t \t \t Langue 
 
\t \t \t <span style="color:red">*</span> 
 
\t \t </label> 
 

 
\t \t <select id="1_selectLangue"></select> 
 
<!--add following style to your anchor tag--> 
 
\t \t <a id="boutonLangue" style="display:table-cell;vertical-align:middle"> 
 
\t \t \t <img src="ic_enter.png"/> 
 
\t \t </a> 
 

 
\t </li> 
 

 
</ul>

Answer 3

Вы можете добавить

#boutonLangue>img{ 
     position:absolute; 
     margin-top: 6px; 
    } 

к вашему css, и он должен немного подтолкнуть img. Here - ваша модифицированная скрипка.