在CSS中的文本顶部的文本？

时间：2015-08-18 05:14:57

标签： html css font-awesome

我把Font Awesome图标（FB，Twitter，Steam）看起来像图像，但实际上是我的页脚中的文本，我添加了一些其他链接文本。现在我的页脚会显示文本旁边的图标，但我希望我的图标位于文本的顶部，并且像这个网站一样居中：see footer here。这个网站也有悬停，我知道这个命令，但我不知道在哪里包含它。

我的代码：

＆＃13;
＆＃13; 
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 87px;
    background-color: #212022;
    border-bottom:2px groove #cc9900;
}
main {
  background-color: #181719;
}

.centered {
    margin: 160px auto;
    padding:30px 50px;
    width: 800px;
    color: #efefef;
    background: #1c1b1d;
    border: 1px groove #cc9900;
}
.centered h2 {
    text-align:center;
}
footer {
  width: 100%;
  height: 164px;
  background-color : #212022;
  border-top: 1px groove #cc9900;
}
p{
  color: white
}
@font-face {
 font-family: "csgofontlight"
 src: url('../fonts/csgofontlight.tff') format('truetype');
 }
#logo{
	width: 520px;
	height: 80px;
	background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
	margin-top:3px;
        left: 108px;
        float: left;
	position: absolute;
        text-indent:-9999px;
}
#steamlogin{
	width: 154px;
	height: 23px;
	background: url('/StaffPage/img/steamlogin.png');
	margin-top: 34px;
        right: 108px;	
        float: right;
	position: absolute;
        text-indent:-9999px;
}
body {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px
} 
header ul {
   list-style:none;
  margin:33px auto;
  width:600px;
  text-align:center;
}
header ul li{
  display:inline-block;
  margin:10px;
}
header ul li a {
  color: #949494;
  text-decoration : none;
  font-size : 100%;
  position: absolute; top: 34px; right: 300px;
  font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
  color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
  position: absolute; top: 34px; right: 400px;
}

footer ul {
  list-style:none;
  margin:50px auto;
  width:1000px;
  position: absolute; top: 620px; right: 310px;
}
footer ul li {
  display:inline-block;
  margin:10px;
}
footer ul li a {
  color: #717171;
  text-decoration : none;
  font-size : 100%;
  font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a:hover {

  color: #DADADB;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
  font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
  color: #DDDDDD;
}
main ul li {
  font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
  color: #949494;
  margin: 0 0 10px 0;
 }
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
  <header>
    <div class="wrapper">
    	<div id="logo"></div>
         <a href="//csgoshuffle.com" id="logo">Range Web Development</a>
    	<div id="steamlogin"></div>
        <a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
   </div>
    <ul>
        <li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
        <li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
    </ul>
  </header>
  <main class="Site-content">
    <div class="centered">
        <h2>STAFF TEAM</h2>
     <ul>
        <li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
        <h2>Missing Value , here is fix</h2>
            <ul>
            <li>Our Mod Chimbobway will add you </li>
            <li>You will recive a case ID from the mod</li>
            <li>You Have to provide the mod with screen shots of all the info that he needs</li>
            <li>All Trades must has Code that the mod gonna give it to you</li>            
     </ul>
    </div>
  </main>
  <footer>
     <ul>
       <div class="navbar-text pull-right">
      <li><a  href="//facebook.com/csgoshuffle">  <i class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></i></li>
      <li><a  href="//twitter.com/csgoshuffle">  <i class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></i></li>
      <li><a  href="//steamcommunity.com/groups/">  <i class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></i></li>
      
      <li><a href ="//csgoshuffle.com/status">Status</a></li>
      <li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
      <li><a href ="//csgoshuffle.com/contact">Contact</a></li>
      <li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
      <li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
      <li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
      
      
    </ul>
</footer>
</body>
＆＃13;
＆＃13;
＆＃13;

http://codepen.io/anon/pen/xGNYGK

4 个答案:

答案 0 :(得分：1)

嗯，它有点反应迟钝，但我们只会解决你遇到的问题。我们来看看。

对于初学者，你必须关闭你的元素，只是为了良好的练习。您的<footer>可能是这样的。

<footer>

    <ul>
        <li>
          <a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x" style='color: #CCCCCC'></i></a></li>
        <li>
          <a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x" style='color: #CCCCCC;'></i></a></li>
        <li>
          <a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x" style='color: #CCCCCC;'></i></a></li>
    </ul>



    <ul>
        <li><a href="//csgoshuffle.com/status">Status</a></li>
        <li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
        <li><a href="//csgoshuffle.com/contact">Contact</a></li>
        <li><a href="//support.csgoshuffle.com/kb">FAQ</a></li>
        <li><a href="//csgoshuffle.com/tos">Terms of Service</a></li>
        <li><a href="//store.steampowered.com/">Powered by Steam</a></li>
    </ul>
</footer>

我删除了不必要的div，并将<ul>拆分为2 <ul> s，图标和文字。

现在为css

从<footer>

中删除固定高度 
footer {
  width: 100%;
  background-color : #212022;
  border-top: 1px groove #cc9900;
}

此外，从图标中删除浮动和绝对定位 

#logo{
    width: 520px;
    height: 80px;
    background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
    margin-top:3px;
}
#steamlogin{
    width: 154px;
    height: 23px;
    background: url('/StaffPage/img/steamlogin.png');
    margin-top: 34px;
}

最后，我将您的<ul>显示为block并删除了固定的width 

footer ul {
  display: block;
  list-style:none;
  margin:50px auto;
  text-align:center;
}

这应该根据您的需要自动对齐eveything，而无需为每个不同的显示宽度明确定位所有内容。

更新您可以将margin:50px auto;更改为margin:0px auto;，以便仔细了解您的需求

更新2 与悬停效果一样

您应该从<li> <a>中移除该样式，例如

<li><a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li>

并将其添加到您的CSS中

footer ul li a i{
    color: #CCCCCC
}

然后你只需要改变这个规则

header ul li a:hover

到这个

footer ul li a:hover i

e.g。

header ul li a:hover i{
    color: #E6E6E6;
    -o-transition: color 0.25s linear;
    -moz-transition: color 0.25s linear;
    -khtml-transition: color 0.25s linear;
    -webkit-transition: color 0.25s linear;
    -ms-transition: color 0.25s linear;
    transition: color 0.25s linear;
}

这是工作片段

＆＃13;
＆＃13; 
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 87px;
    background-color: #212022;
    border-bottom:2px groove #cc9900;
}
main {
  background-color: #181719;
}

.centered {
    margin: 160px auto;
    padding:30px 50px;
    width: 800px;
    color: #efefef;
    background: #1c1b1d;
    border: 1px groove #cc9900;
}
.centered h2 {
    text-align:center;
}
footer {
  width: 100%;
  background-color : #212022;
  border-top: 1px groove #cc9900;
}
p{
  color: white
}
@font-face {
 font-family: "csgofontlight"
 src: url('../fonts/csgofontlight.tff') format('truetype');
 }
#logo{
	width: 520px;
	height: 80px;
	background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
	margin-top:3px;
}
#steamlogin{
	width: 154px;
	height: 23px;
	background: url('/StaffPage/img/steamlogin.png');
	margin-top: 34px;
}
body {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px
} 
header ul {
   list-style:none;
  margin:33px auto;
  width:600px;
  text-align:center;
}
header ul li{
  display:inline-block;
  margin:10px;
}
header ul li a {
  color: #949494;
  text-decoration : none;
  font-size : 100%;
  position: absolute; top: 34px; right: 300px;
  font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
  color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
  position: absolute; top: 34px; right: 400px;
}

footer ul {
  display: block;
  list-style:none;
  margin:0px auto;
  text-align: center;
}
footer ul li {
  display:inline-block;
  margin:10px;
}
footer ul li a {
  color: #717171;
  text-decoration : none;
  font-size : 100%;
  font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}

footer ul li a i{
  color: #CCCCCC;
}

footer ul li a:hover i{

  color: yellow;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
  font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
  color: #DDDDDD;
}
main ul li {
  font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
  color: #949494;
  margin: 0 0 10px 0;
 }
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
  <header>
    <div class="wrapper">
    	<div id="logo"></div>
         <a href="//csgoshuffle.com" id="logo">Range Web Development</a>
    	<div id="steamlogin"></div>
        <a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
   </div>
    <ul>
        <li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
        <li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
    </ul>
  </header>
  <main class="Site-content">
    <div class="centered">
        <h2>STAFF TEAM</h2>
     <ul>
        <li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
        <h2>Missing Value , here is fix</h2>
            <ul>
            <li>Our Mod Chimbobway will add you </li>
            <li>You will recive a case ID from the mod</li>
            <li>You Have to provide the mod with screen shots of all the info that he needs</li>
            <li>All Trades must has Code that the mod gonna give it to you</li>            
     </ul>
    </div>
  </main>
  <footer>

    <ul>
        <li>
          <a href="//facebook.com/csgoshuffle"> <i class="fa fa-facebook fa-2x"></i></a></li>
        <li>
          <a href="//twitter.com/csgoshuffle"> <i class="fa fa-twitter fa-2x"></i></a></li>
        <li>
          <a href="//steamcommunity.com/groups/"> <i class="fa fa-steam fa-2x"></i></a></li>
    </ul>



    <ul>
        <li><a href="//csgoshuffle.com/status">Status</a></li>
        <li><a href="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
        <li><a href="//csgoshuffle.com/contact">Contact</a></li>
        <li><a href="//support.csgoshuffle.com/kb">FAQ</a></li>
        <li><a href="//csgoshuffle.com/tos">Terms of Service</a></li>
        <li><a href="//store.steampowered.com/">Powered by Steam</a></li>
    </ul>
</footer>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

  1. 将图标包裹在单独的div中
  2. 将链接包装在单独的div
    3. 中
  3. 页脚未居中。删除position: absolute以及左上角。这应该是你的页脚中心
  4. 从.pull-right移除.navbar-text课程并添加text-align: center。对包含链接的div执行相同的操作

    5. 至于悬停效果。

    1. 删除HTML文件中图标的内联样式
    2. 为图标footer, .navbar-text, .fa:hover添加选择器，然后在悬停时应用您希望它们更改的颜色

答案 2 :(得分：0)

希望这会对你有帮助..

HTML 

<!DOCTYPE html>
<html>
<head>
<title>CSGOShuffle Staff Team</title>
<link rel="stylesheet" type="text/css" href="/StaffPage/css/style.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<link rel="shortcut icon" href="/StaffPage/icon.ico" />
<body class="Site">
  <header>
    <div class="wrapper">
        <div id="logo"></div>
         <a href="//csgoshuffle.com" id="logo">Range Web Development</a>
        <div id="steamlogin"></div>
        <a href="//csgoshuffle.com/login" id="steamlogin">Range Web</a>
   </div>
    <ul>
        <li><a href ="//support.csgoshuffle.com" target="_blank">Support</a></li>
        <li><a id="howto" href ="//csgoshuffle.com/howto" target="_blank">How to Play</a></li>
    </ul>
  </header>
  <main class="Site-content">
    <div class="centered">
        <h2>STAFF TEAM</h2>
     <ul>
        <li>Our mod chimbobway can deal with all missing skins deals , his account link is </li>
        <h2>Missing Value , here is fix</h2>
            <ul>
            <li>Our Mod Chimbobway will add you </li>
            <li>You will recive a case ID from the mod</li>
            <li>You Have to provide the mod with screen shots of all the info that he needs</li>
            <li>All Trades must has Code that the mod gonna give it to you</li>            
     </ul>
    </div>
  </main>
  <footer>
     <ul>
       <div class="navbar-icon">
      <li><a  href="//facebook.com/csgoshuffle">  <i class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></i></li>
      <li><a  href="//twitter.com/csgoshuffle">  <i class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></i></li>
      <li><a  href="//steamcommunity.com/groups/">  <i class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></i></li>
      </div>
       <div class="navbar-text">
      <li><a href ="//csgoshuffle.com/status">Status</a></li>
      <li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
      <li><a href ="//csgoshuffle.com/contact">Contact</a></li>
      <li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
      <li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
      <li><a href ="//store.steampowered.com/">Powered by Steam</a></li>
       </div>


    </ul>
</footer>
</body>
</html>

CSS 

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}
header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 87px;
    background-color: #212022;
    border-bottom:2px groove #cc9900;
}
main {
  background-color: #181719;
}

.centered {
    margin: 160px auto;
    padding:30px 50px;
    width: 800px;
    color: #efefef;
    background: #1c1b1d;
    border: 1px groove #cc9900;
}
.centered h2 {
    text-align:center;
}
footer {
  width: 100%;
  height: 164px;
  background-color : #212022;
  border-top: 1px groove #cc9900;
}
p{
  color: white
}
@font-face {
 font-family: "csgofontlight"
 src: url('../fonts/csgofontlight.tff') format('truetype');
 }
#logo{
    width: 520px;
    height: 80px;
    background: url<'/StaffPage/img/logo.png'> no-repeat scroll center;
    margin-top:3px;
        left: 108px;
        float: left;
    position: absolute;
        text-indent:-9999px;
}
#steamlogin{
    width: 154px;
    height: 23px;
    background: url('/StaffPage/img/steamlogin.png');
    margin-top: 34px;
        right: 108px;   
        float: right;
    position: absolute;
        text-indent:-9999px;
}
body {
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px
} 
header ul {
   list-style:none;
  margin:33px auto;
  width:600px;
  text-align:center;
}
header ul li{
  display:inline-block;
  margin:10px;
}
header ul li a {
  color: #949494;
  text-decoration : none;
  font-size : 100%;
  position: absolute; top: 34px; right: 300px;
  font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
header ul li a:hover {
  color: #E6E6E6;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
#howto {
  position: absolute; top: 34px; right: 400px;
}

footer ul {
  list-style:none;
  margin:50px auto;
  width:1000px;
  position: absolute; top: 620px; right: 310px; 
  text-align:center;
}
footer ul li {
  display:inline-block;
  margin:10px;
}
footer ul li a {
  color: #717171;
  text-decoration : none;
  font-size : 100%;
  font : 17px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
}
footer ul li a:hover {

  color: #DADADB;
-o-transition: color 0.25s linear;
-moz-transition: color 0.25s linear;
-khtml-transition: color 0.25s linear;
-webkit-transition: color 0.25s linear;
-ms-transition: color 0.25s linear;
transition: color 0.25s linear;
}
h2 {
  font : 20px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
  color: #DDDDDD;
}
main ul li {
  font : 15px "csgofontlight" , Arial, Helvetica, Geneva, sans-serif;
  color: #949494;
  margin: 0 0 10px 0;
 }

答案 3 :(得分：0)

您可以在页脚中进行以下更改：

HTML 

<footer>
    <ul>       
     <li><a  href="//facebook.com/csgoshuffle" class="fa fa-facebook fa-2x" style ='color: #CCCCCC'></a></li>
     <li><a  href="//twitter.com/csgoshuffle" class="fa fa-twitter fa-2x" style ='color: #CCCCCC;'></a></li>
     <li><a  href="//steamcommunity.com/groups/" class="fa fa-steam fa-2x" style ='color: #CCCCCC;'></a></li>
   </ul>
   <ul>
     <li><a href ="//csgoshuffle.com/status">Status</a></li>
     <li><a href ="//csgoshuffle.com/provably-fair">Provably Fair</a></li>
     <li><a href ="//csgoshuffle.com/contact">Contact</a></li>
     <li><a href ="//support.csgoshuffle.com/kb">FAQ</a></li>
     <li><a href ="//csgoshuffle.com/tos">Terms of Service</a></li>
     <li><a href ="//store.steampowered.com/">Powered by Steam</a></li>     
   </ul>
</footer>

我刚刚将列表分为两个列表，一个包含图标，另一个包含其余选项。还包括锚<a>标记本身中的类和样式相关信息。

以及样式表中的以下更改。

CSS 

footer ul 
{
   margin:auto;
   width:1000px;
   top: 620px; right: 310px;
   text-align: center; 
}

在这里，我删除了绝对位置的约束，并将边距设置为auto，以便显示正确的缩进。

相关问题
最新问题