基本上我想在一些文字旁边放置一个带有字体真棒的Steam徽标，这样我就可以增加文字大小。唯一的问题是我不能垂直居中蒸汽标识，我也无法垂直地将文本中心放在旁边。由于某种原因，它决定坐在徽标下面。任何帮助表示赞赏！
/* Default Stuff */
* {
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
font-family:"Open Sans", sans-serif;
}
/* Loading Animation */
.loading-spinner {
width:100px;
height:100px;
border:2px solid rgb(255,255,255);
border-top:3px solid rgb(250,32,32);
border-radius:100%;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
animation:loading-spin 1s infinite linear;
}
@keyframes loading-spin {
from {
transform:rotate(0deg);
} to {
transform:rotate(360deg);
}
}
#loading-overlay {
height:100%;
width:100%;
background:rgb(17,17,17);
position:fixed;
z-index:9999999999;
left:0px;
top:0px;
}
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
.steam-login {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);;
width:160px;
height:40px;
position:absolute;
z-index:999999999;
top:13px;
left:1160px;
}
.steam-login a {
display:block;
color:rgb(255,255,255);
height:100%;
width:100%;
margin-left:5px;
font-size:30px;
}
.sign-in-text {
color:white;
font-size:8px;
position:absolute;
margin-left:50px;
}
/* Sidebar Menu */
#sidebar-menu {
background:rgb(41,41,41);
width:60px;
height:100%;
position:absolute;
text-align:center;
line-height:60px;
box-shadow:4px 4px 8px black;
left:0px;
top:0px;
}
ul {
margin:0px;
padding:0px;
margin-top:3px;
}
ul li {
list-style:none;
height:60px;
border-bottom:2px solid rgb(17,17,17);
}
ul li a {
color:rgb(255,255,255);
font-size:30px;
display:block;
height:100%
width:100%;
}
ul li a:hover {
background:rgb(255,255,255);
color:rgb(41,41,41);
}
ul li a:active {
font-size:25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Loading Animation-->
<div id="loading-overlay">
<div class="loading-spinner"></div>
</div>
<!--Website Header-->
<div id="header">
<div class="steam-login">
<a href="#"><i class="fa fa-steam">
<div class="sign-in-text">Steam Sign-In</div>
</i></a>
</div>
</div>
<!--Website Sidebar-->
<div id="sidebar-menu">
<ul>
<li><a href="#"><i class=""></i></a></li>
<li><a href="#"><i class="fa fa-area-chart"></i></a></li>
<li><a href="#"><i class="fa fa-life-ring"></i></a></li>
<li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
<li><a href="#"><i class="fa fa-shopping-basket"></i></a></li>
<li><a href="#"><i class="fa fa-users"></i></a></li>
</ul>
</div>
答案 0 :(得分：0)
当您需要并排和垂直中间对齐项目时，最好使用flexbox。如果您不在<i>正在使用font-awesome标记内写文本，也是安全的。将文本包装在span中并将其放在<i>标记之外，这样就不会混淆文本和图标的CSS。
在这里，我已经更改了<div cass="steam-login">内部元素的html和css。其余的代码是一样的。
/* Default Stuff */
* {
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
font-family:"Open Sans", sans-serif;
}
/* Loading Animation */
.loading-spinner {
width:100px;
height:100px;
border:2px solid rgb(255,255,255);
border-top:3px solid rgb(250,32,32);
border-radius:100%;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
animation:loading-spin 1s infinite linear;
}
@keyframes loading-spin {
from {
transform:rotate(0deg);
} to {
transform:rotate(360deg);
}
}
#loading-overlay {
height:100%;
width:100%;
background:rgb(17,17,17);
position:fixed;
z-index:9999999999;
left:0px;
top:0px;
}
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
.steam-login {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);;
width:160px;
height:40px;
position:absolute;
z-index:999999999;
top:13px;
left:1160px;
}
.steam-login a {
display:block;
color:rgb(255,255,255);
height:100%;
width:100%;
margin-left:5px;
font-size:30px;
}
.sign-in-text{
display:flex;
align-items:center;
height:100%;
width:100%;
margin:0;
padding:0;
}
.sign-in-text>span{
color:white;
font-size:8px;
margin:0;
padding:0;
margin-left:10px;
}
/* Sidebar Menu */
#sidebar-menu {
background:rgb(41,41,41);
width:60px;
height:100%;
position:absolute;
text-align:center;
line-height:60px;
box-shadow:4px 4px 8px black;
left:0px;
top:0px;
}
ul {
margin:0px;
padding:0px;
margin-top:3px;
}
ul li {
list-style:none;
height:60px;
border-bottom:2px solid rgb(17,17,17);
}
ul li a {
color:rgb(255,255,255);
font-size:30px;
display:block;
height:100%
width:100%;
}
ul li a:hover {
background:rgb(255,255,255);
color:rgb(41,41,41);
}
ul li a:active {
font-size:25px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Loading Animation
<div id="loading-overlay">
<div class="loading-spinner"></div>
</div>-->
<!--Website Header-->
<div id="header">
<div class="steam-login">
<a href="#">
<div class="sign-in-text"><i class="fa fa-steam "></i><span>Steam Sign-In</span></div>
</a>
</div>
</div>
<!--Website Sidebar-->
<div id="sidebar-menu">
<ul>
<li><a href="#"><i class=""></i></a></li>
<li><a href="#"><i class="fa fa-area-chart"></i></a></li>
<li><a href="#"><i class="fa fa-life-ring"></i></a></li>
<li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
<li><a href="#"><i class="fa fa-shopping-basket"></i></a></li>
<li><a href="#"><i class="fa fa-users"></i></a></li>
</ul>
</div>