2017-01-08 8 views
1

基本的にはテキストの横にフォントAwesomeを付けてスチームロゴを中心にしたいので、テキストサイズを大きくすることができます。唯一の問題は、蒸気ロゴを垂直にセンタリングすることができず、テキストセンターを垂直に配置できないことです。何らかの理由でロゴの下に座ることに決めました。どんな助けもありがとう!どのように私はテキストの中心に次の文字を置くことができますか?

/* 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-ログイン:ディスプレイ:ブロック; 'to' .steam-login a:display:インラインブロック。 ' –

+0

私はしようとしましたが、何もしませんでした。 – Abyssal

+0

"center next"はあまり正確ではありません。それを中心にしたいのですか、それともテキストのそばに置いておきたいのですか?あなたが言及している特定のテキストクラスは何ですか? –

答えて

0

あなたの側面と垂直方向に中央部でアイテム側に整列する必要がある場合フレキシボックスを使用することは常に良いです。また、<i>タグ内にテキストを書き込まずに、font-awesomeを使用しても安全です。 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

フレックスボックスでは、 'align-items:center;'は垂直方向に、 'justify-content:center;は水平方向にセンタリングします。ありがとう。 – ab29007

関連する問題