基本上我想在一些文字旁邊加上字體真棒的蒸汽標誌,這樣我就可以增加文字大小。唯一的問題是我無法垂直居中蒸汽標誌,而且我也無法將文字中心垂直放置在它旁邊。由於某種原因,它決定坐在標誌下。任何幫助表示讚賞!我怎樣才能在字體真棒旁邊居中文字
/* Default Stuff */
* {
\t margin:0px;
\t padding:0px;
\t text-decoration:none;
\t list-style:none;
\t font-family:"Open Sans", sans-serif;
}
/* Loading Animation */
.loading-spinner {
\t width:100px;
\t height:100px;
\t border:2px solid rgb(255,255,255);
\t border-top:3px solid rgb(250,32,32);
\t border-radius:100%;
\t position:absolute;
\t top:0px;
\t bottom:0px;
\t left:0px;
\t right:0px;
\t margin:auto;
\t animation:loading-spin 1s infinite linear;
}
@keyframes loading-spin {
\t from {
\t \t transform:rotate(0deg);
\t } to {
\t \t transform:rotate(360deg);
\t }
}
#loading-overlay {
\t height:100%;
\t width:100%;
\t background:rgb(17,17,17);
\t position:fixed;
\t z-index:9999999999;
\t left:0px;
\t top:0px;
}
/* Website Header */
#header {
\t background:rgb(28,28,28);
\t width:100%;
\t height:60px;
\t position:absolute;
\t box-shadow:0px 0px 8px 2px black;
\t border-top:3px solid rgb(235,50,50);
\t z-index:99999999;
\t left:0px;
\t top:0px;
}
.steam-login {
\t background:rgb(50,50,50);
\t border-left:3px solid rgb(235,50,50);;
\t width:160px;
\t height:40px;
\t position:absolute;
\t z-index:999999999;
\t top:13px;
\t left:1160px;
}
.steam-login a {
\t display:block;
\t color:rgb(255,255,255);
\t height:100%;
\t width:100%;
\t margin-left:5px;
\t font-size:30px;
}
.sign-in-text {
\t color:white;
\t font-size:8px;
\t position:absolute;
\t margin-left:50px;
}
/* Sidebar Menu */
#sidebar-menu {
\t background:rgb(41,41,41);
\t width:60px;
\t height:100%;
\t position:absolute;
\t text-align:center;
\t line-height:60px;
\t box-shadow:4px 4px 8px black;
\t left:0px;
\t top:0px;
}
ul {
\t margin:0px;
\t padding:0px;
\t margin-top:3px;
}
ul li {
\t list-style:none;
\t height:60px;
\t border-bottom:2px solid rgb(17,17,17);
}
ul li a {
\t color:rgb(255,255,255);
\t font-size:30px;
\t display:block;
\t height:100%
\t width:100%;
}
ul li a:hover {
\t background:rgb(255,255,255);
\t color:rgb(41,41,41);
}
ul li a:active {
\t font-size:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Loading Animation-->
\t \t <div id="loading-overlay">
\t \t \t <div class="loading-spinner"></div>
\t \t </div>
\t \t <!--Website Header-->
\t \t <div id="header">
\t \t \t <div class="steam-login">
\t \t \t \t <a href="#"><i class="fa fa-steam">
\t \t \t \t \t <div class="sign-in-text">Steam Sign-In</div>
\t \t \t \t </i></a>
\t \t \t </div>
\t \t </div>
\t \t <!--Website Sidebar-->
\t \t <div id="sidebar-menu">
\t \t \t <ul>
\t \t \t \t <li><a href="#"><i class=""></i></a></li>
\t \t \t \t <li><a href="#"><i class="fa fa-area-chart"></i></a></li>
\t \t \t \t <li><a href="#"><i class="fa fa-life-ring"></i></a></li>
\t \t \t \t <li><a href="#"><i class="fa fa-cart-arrow-down"></i></a></li>
\t \t \t \t <li><a href="#"><i class="fa fa-shopping-basket"></i></a></li>
\t \t \t \t <li><a href="#"><i class="fa fa-users"></i></a></li>
\t \t \t </ul>
\t \t </div>
集'.steam-登錄一個:顯示:塊; '到'.steam-login a:display:inline-block; ' –
我試過了,但沒有做任何事情。 – Abyssal
「旁邊的中心」並不十分精確。你想把它放在中心還是你想把它放在文本旁邊?你指的是什麼特定的文本類? –