align icons to: link in a list

Navigation
1

How can I vertically align the icons (fontawesome) of a list ul li independent of the height of the li? thanks 

a {
  background: red;
  display:block;
  width: 30px;
  height: 60px;
  text-align: center;
  vertical-align:middle;
  text-decoration:none;
}
li {
   background: gray;
   list-style:none;
   }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
		<ul>
			<li><a href="" class="fa fa-facebook"></a>Alinear iconos middle</li>
			<li><a href="" class="fa fa-twitter"></a>Alinear iconos middle</li>
			<li><a href="" class="fa fa-envelope"></a>Alinear iconos middle</li>
			<li><a href="" class="fa fa-camera-retro"></a>Alinear iconos middle</li>
		</ul>
    
    <p> porque el texto si se alinea verticalmente en el middle y los iconos no?<br>
    como soluciono esto. gracias</p>
    
asked by Daniel 21.05.2017 в 21:10
source

1 answer

1

Hurray, Flexbox! 

a {
  background: red;
  display:block;
  width: 30px;
  height: 60px;
  text-align: center;
  text-decoration:none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
li {
   background: gray;
   list-style:none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
		<ul>
			<li><a href=""><i class="fa fa-facebook"></i></a>Alinear iconos middle</li>
			<li><a href=""><i class="fa fa-twitter"></i></a>Alinear iconos middle</li>
		</ul>
    
answered by 21.05.2017 / 21:24
source
icon application android studio Load a SELECT depending on another SELECT - Javascript - DOM