文本对齐:中心故障。也许定位错了?

时间:2016-12-27 23:20:24

标签: html css

我对编程很陌生。我很抱歉没有遵循任何协议。

我的页脚文字没有以页面为中心,我遇到了问题。我有一个text-align:center标签,但它没有注册。

任何建议表示赞赏。

:)

<style>

h2 {
font-family: 'times new roman';
font-style: bold;
font-size: 50px; 
text-align:center;
margin-top: 70px;
margin-left: 120px;
margin-right: 120px;
}

a {
text-align:center;
font-family: 'Courier New', Courier, monospace;
letter-spacing: 0px; 
font-size: 16px;
font-weight: 500;
}

a:link {text-decoration: none;color: black; }
a:visited {text-decoration: none; color: black; }
a:hover { letter-spacing: 20px; background-color: yellow; color: black; }
a:active { background-color: yellow; color: black; }

li {display: inline-block; padding-right: 40px; }       

</style>
</head>


<div style:"position: center">

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ipsum tortor, pharetra et eleifend in, tristique vel quam. Duis eu leo pretium, tempus sapien in, malesuada est. Integer at lorem nec mi finibus maximus eu sit amet nisi.     </h2>

</div>

<div style="position: absolute; bottom: 0px; text-align:center">
<ul> 
<li><a href="mailto:youremailaddress" target="_blank">E M A I L</a></li>
<li><a href="http://www.twitter.com" target="_blank">T W I T T E R</a></li>
<li><a href="http://www.facebook.com" target="_blank">F A C E B O O K</a>    </li>
<li><a href="http://www.instagram.com" target="_blank">I N S T A G R A M</a>                </li>
</ul>
</div>

</body>

</html>

感谢您的帮助!

2 个答案:

答案 0 :(得分:2)

很多问题:

  1. 这不是编程,但这是标记。
  2. 属性有=而不是:。 (style:"position: center"
  3. 没有position: center;,它应该是text-align: center
  4. <强>段

    &#13;
    &#13;
    h2 {
      font-family: 'times new roman';
      font-style: bold;
      font-size: 50px;
      text-align: center;
      margin-top: 70px;
      margin-left: 120px;
      margin-right: 120px;
    }
    a {
      text-align: center;
      font-family: 'Courier New', Courier, monospace;
      letter-spacing: 0px;
      font-size: 16px;
      font-weight: 500;
    }
    a:link {
      text-decoration: none;
      color: black;
    }
    a:visited {
      text-decoration: none;
      color: black;
    }
    a:hover {
      letter-spacing: 20px;
      background-color: yellow;
      color: black;
    }
    a:active {
      background-color: yellow;
      color: black;
    }
    li {
      display: inline-block;
      padding-right: 40px;
    }
    &#13;
    <div style="text-align: center;">
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ipsum tortor, pharetra et eleifend in, tristique vel quam. Duis eu leo pretium, tempus sapien in, malesuada est. Integer at lorem nec mi finibus maximus eu sit amet nisi.</h2>
    </div>
    
    <div style="position: absolute; bottom: 0px; right: 0; text-align: center; left: 0;">
      <ul>
        <li><a href="mailto:youremailaddress" target="_blank">E M A I L</a></li>
        <li><a href="http://www.twitter.com" target="_blank">T W I T T E R</a></li>
        <li><a href="http://www.facebook.com" target="_blank">F A C E B O O K</a> </li>
        <li><a href="http://www.instagram.com" target="_blank">I N S T A G R A M</a> </li>
      </ul>
    </div>
    &#13;
    &#13;
    &#13;

    不确定这是否是您所期望的:

    preview

答案 1 :(得分:0)

尝试将width: 100%;添加到您的页脚div样式中。 此外,您的代码还有其他一些问题......

没有位置:中心。请参阅以下有效值: https://developer.mozilla.org/en-US/docs/Web/CSS/positionhttp://www.w3schools.com/cssref/pr_class_position.asp

HTML属性使用&#34; =&#34;设置而不是&#34;:&#34;。

相关问题