2017-01-08 43 views
1

基本上我想在一些文字旁邊加上字體真棒的蒸汽標誌,這樣我就可以增加文字大小。唯一的問題是我無法垂直居中蒸汽標誌,而且我也無法將文字中心垂直放置在它旁邊。由於某種原因,它決定坐在標誌下。任何幫助表示讚賞!我怎樣才能在字體真棒旁邊居中文字

/* 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>

+0

集'.steam-登錄一個:顯示:塊; '到'.steam-login a:display:inline-block; ' –

+0

我試過了,但沒有做任何事情。 – Abyssal

+0

「旁邊的中心」並不十分精確。你想把它放在中心還是你想把它放在文本旁邊?你指的是什麼特定的文本類? –

回答

0

這是一件好事,當你需要通過側和垂直方向的中間對齊到項目方使用Flexbox的。此外,如果您不使用font-awesome上的<i>標籤寫入文本,它也是安全的。將文本包裝在span中,並將其放在<i>標籤之外,這樣您就不會混淆文本和圖標的CSS。

在這裏,我已經改變了僅在<div cass="steam-login">以內的元素的html和css。其餘的代碼是相同的。

/* 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  display:flex; 
 
     align-items:center; 
 
     height:100%; 
 
     width:100%; 
 
     margin:0; 
 
     padding:0; 
 
    } 
 
    .sign-in-text>span{ 
 
\t  color:white; 
 
\t  font-size:8px; 
 
     margin:0; 
 
     padding:0; 
 
\t  margin-left:10px; 
 
    } 
 

 
    /* 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; 
 
    }
<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 
 
\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="#"> 
 
        <div class="sign-in-text"><i class="fa fa-steam "></i><span>Steam Sign-In</span></div> 
 
\t \t \t \t </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>

+0

@Abyssal ..如果它解決了你的問題,請不要忘記接受答案。 – ab29007

+0

好吧,還有一件事我怎麼會將這些水平居中,因爲我不記得如何在flexbox上做到這一點。 – Abyssal

+0

在flexbox中,'align-items:center;'垂直居中,'justify-content:center;'居中居中。謝謝。 – ab29007