基本的にはテキストの横にフォント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>
セット '.steam-ログイン:ディスプレイ:ブロック; 'to' .steam-login a:display:インラインブロック。 ' –
私はしようとしましたが、何もしませんでした。 – Abyssal
"center next"はあまり正確ではありません。それを中心にしたいのですか、それともテキストのそばに置いておきたいのですか?あなたが言及している特定のテキストクラスは何ですか? –