如何将文本与字体真棒 5 图标对齐?

我可以使用哪个属性将字体真棒图标与单词支持垂直对齐？我的意思是这个导航列表：

<nav class="nav">
<ul class="nav__list--second">
<i class="far fa-life-ring fa-2x"></i>
<a href="/support">Support </a>
</ul>
</nav>

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-size: 16px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 95vw;
padding: 10px;
margin: 10px;
}
header .brand img {
width: 60px;
}
header nav ul {
list-style: none;
}
ul.nav__list--first {
vertical-align: middle;
}
header .nav__list--first li,
header .nav__list--second li
{
text-decoration: none;
display: inline;
margin: 10px;
}
header .nav__list--first li a,
header .nav__list--second li a {
text-decoration: none;

}

<head>
<script src="https://kit.fontawesome.com/69b14a4680.js" crossorigin="anonymous"></script>
</head>
<header>
<div class="brand">
<a href="/">
<img src="./assets/images/logo.png" alt="GEM Logo" />
</a>
</div>
<nav class="nav">
<ul class="nav__list--first">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/company">Company</a>
</li>
<li>
<a href="/solutions">Solutions</a>
</li>
</ul>
</nav>
<nav class="nav">
<ul class="nav__list--second">
<i class="far fa-life-ring fa-2x"></i>
<a href="/support">Support </a>
</ul>
</nav>
</header>
<div class="container">
<main id="main">
<div class="main">

</div>
</main>
<section id="why-choose-us">
<div class="container">
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
</div>
</section>

<section id="about-us" class="about-us">
<div class="title">
<h2>Our Team</h2>
</div>
<div class="container">
<div class="card">
<img src="./assets/images/team/enrique.jpg" alt="Enrique Massuet" />
<p>Enrique Massuet</p>
<p>CEO</p>
<p>Medical Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet@gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/giosvel.jpg" alt="Giosvel Carril" />
<p>Giosvel Carril</p>
<p>CFO</p>
<p>Life Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet@gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/diesan.jpg" alt="Diesan Romero" />
<p>Diesan Romero</p>
<p>CTO</p>
<p>Technology and Data Science Expert/</p>
<div class="personal-social-icons">
<a href="https://twitter.com/diesanromero">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/diesan.romero.56">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://instagram.com/diesanromero">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/diesanromeros/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="mailto://diesanromero@gemfs.company">
<i class="far fa-envelope"></i>
</a>
</div>
</div>
</div>
</section>
</div>

<footer class="footer">
<div class="copyright">
<p>Copyright</p>
</div>
<ul class="social-icons">
<a href="">
<i class="fab fa-twitter"></i>
</a>
<a href="">
<i class="fab fa-facebook-f"></i>
</a>
<a href="">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/company/gemfsolutions/">
<i class="fab fa-linkedin-in"></i>
</a>
</ul>
</footer>

只需使其弯曲并对齐项目中心即可。

.nav__list--second {
display: flex;
flex-direction: row;
align-items: center;
}

将弹性框与对齐项一起使用：居中

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-size: 16px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 95vw;
padding: 10px;
margin: 10px;
}
header .brand img {
width: 60px;
}
header nav ul {
list-style: none;
}
ul.nav__list--first {
vertical-align: middle;
}
header .nav__list--first li,
header .nav__list--second li
{
text-decoration: none;
display: inline;
margin: 10px;
}
header .nav__list--first li a,
header .nav__list--second li a {
text-decoration: none;

}
.nav ul{
display:flex;
align-items:center;
}

<head>
<script src="https://kit.fontawesome.com/69b14a4680.js" crossorigin="anonymous"></script>
</head>
<header>
<div class="brand">
<a href="/">
<img src="./assets/images/logo.png" alt="GEM Logo" />
</a>
</div>
<nav class="nav">
<ul class="nav__list--first">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/company">Company</a>
</li>
<li>
<a href="/solutions">Solutions</a>
</li>
</ul>
</nav>
<nav class="nav">
<ul class="nav__list--second">
<i class="far fa-life-ring fa-2x"></i>
<a href="/support">Support </a>
</ul>
</nav>
</header>
<div class="container">
<main id="main">
<div class="main">

</div>
</main>
<section id="why-choose-us">
<div class="container">
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
<div class="card">
<div class="card-icon">
<i>icon</i>
</div>
<div class="card-description">
<p>Description</p>
</div>
</div>
</div>
</section>

<section id="about-us" class="about-us">
<div class="title">
<h2>Our Team</h2>
</div>
<div class="container">
<div class="card">
<img src="./assets/images/team/enrique.jpg" alt="Enrique Massuet" />
<p>Enrique Massuet</p>
<p>CEO</p>
<p>Medical Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet@gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/giosvel.jpg" alt="Giosvel Carril" />
<p>Giosvel Carril</p>
<p>CFO</p>
<p>Life Insurance Specialist.</p>
<div class="personal-social-icons">
<a href="https://twitter.com/uno ahi">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/emassuet">
<i class="twitter"></i>
</a>
<a href="https://instagram.com/emassuet">
<i class="twitter"></i>
</a>
<a href="mailto://emassuet@gemfs.company">
<i class="twitter"></i>
</a>
</div>
</div>
<div class="card">
<img src="./assets/images/team/diesan.jpg" alt="Diesan Romero" />
<p>Diesan Romero</p>
<p>CTO</p>
<p>Technology and Data Science Expert/</p>
<div class="personal-social-icons">
<a href="https://twitter.com/diesanromero">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.facebook.com/diesan.romero.56">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://instagram.com/diesanromero">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/diesanromeros/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="mailto://diesanromero@gemfs.company">
<i class="far fa-envelope"></i>
</a>
</div>
</div>
</div>
</section>
</div>

<footer class="footer">
<div class="copyright">
<p>Copyright</p>
</div>
<ul class="social-icons">
<a href="">
<i class="fab fa-twitter"></i>
</a>
<a href="">
<i class="fab fa-facebook-f"></i>
</a>
<a href="">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/company/gemfsolutions/">
<i class="fab fa-linkedin-in"></i>
</a>
</ul>
</footer>

相关内容

最新更新

热门标签：