我正在尝试制作一些带有文本的按钮,它们的文本位于字体真棒图标下方,两者都位于列表项内的中央,我需要锚元素,其中还包含字体真棒图标的 span 元素,以填充整个大小列表项的。
我可以用锚点填充列表项没问题,但我无法将图标的跨度定位在包含它的锚点中的文本上方。
JSFiddle:https ://jsfiddle.net/qod142fz/ 。
HTML:
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#"><span class="fa fa-home"></span>Home</a></li>
<li class="navButton"><a href="#"><span class="fa fa-user"></span>Personal Details</a></li>
<li class="navButton"><a href="#"><span class="fa fa-briefcase"></span>Company</a></li>
<li class="navButton"><a href="#"><span class="fa fa-gbp"></span>Invoices</a></li>
<li class="navButton"><a href="#"><span class="fa fa-address-book"></span>Contacts</a></li>
<li class="navButton"><a href="#"><span class="fa fa-minus"></span>Expenses</a></li>
<li class="navButton"><a href="#"><span class="fa fa-list"></span>Payslips</a></li>
<li class="navButton"><a href="#"><span class="fa fa-cog"></span>Settings</a></li>
</ul>
</div>
CSS:
/* SIDEBAR PRIMARY */
#sidebarPrimary
{
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton
{
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover
{
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a > span
{
display: block;
text-align: center;
margin-bottom: 5px;
}
问题来自flex
. 我建议div
在应该在a
标签内居中的元素周围包裹另一个
/* SIDEBAR PRIMARY */
#sidebarPrimary {
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton {
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover {
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a .fa {
display: block;
height: 1em;
margin: 0 auto 5px;
text-align: center;
width: 1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-home"></span>Home
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-user"></span>Personal Details
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-briefcase"></span>Company
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-gbp"></span>Invoices
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-address-book"></span>Contacts
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-minus"></span>Expenses
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-list"></span>Payslips
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-cog"></span>Settings
</div>
</a></li>
</ul>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句