将所有设备的保留页居中-CSS&；HTML

所以我正在努力提高我对html和CSS的基本理解。看不到一个表，也看不到一个CSS表来定义页面上的元素。（这对我来说是一个很大的进步！）

目前，我的新网站只是一个保留页面，直到我可以制作新网站为止（可能使用Wordpress或类似工具，这样所有乐队成员都可以在不需要太多工作的情况下更改内容）

该网站是

我跟随一些教程和网站，试图把保留文本和图标放在页面的中心，不管是什么设备

然而，在移动设备上，它（视觉上）更靠近左边距，但在大分辨率显示器上看起来还行

我的代码可能是错误的，我希望有一种更简单的方法来完成我所做的事情

CSS:

HTML:

混合磁带国家


马上就来

使用它

margin: 0 auto;

---

<> P>在中间（左、右）

< P>中，我想你正在寻找的是一个响应网页，因为没有一个简单的解决方案可以在所有设备上工作。 您可以尝试以下代码：

Style.css

margin-top:20%;
font-family: 'Century Gothic', 'Questrial', sans-serif,'Didact Gothic', sans-serif,'Muli', sans-serif,"Apple Gothic","AppleGothic","URW Gothic L","Avant Garde",Futura,sans-serif;

删除其他属性

这应该没问题：

CSS

.centered{
  display: block;
  margin: 0 auto 0 auto;
  font-family: 'Century Gothic', 'Questrial', sans-serif,'Didact Gothic', sans-serif,'Muli', sans-serif,"Apple Gothic","AppleGothic","URW Gothic L","Avant Garde",Futura,sans-serif;
}

.centered a img {
  height: 42px;
  margin-right: 3px;
}

HTML

<div style="text-align:center" class="centered"> 
  <span style="font-size:72px">Mix Tape Nation</span>
  <br />
  <span style="font-size:24px">Coming Soon</span>
  <br />
  <a href="http://www.flickr.com/photos/126088079@N07/" title="See my photos on Flickr!" target="_blank"><img src="https://s.yimg.com/pw/images/goodies/white-large-chiclet.png" width="44" height="44" alt="Flickr"></a>
  <a href="http://www.reverbnation.com/page_object/join_mailing_list/artist_4333576" target="_blank"><img alt="Mylinks_join_mailing_list" src="http://gp1.wac.edgecastcdn.net/802892/production_static/20140812090746/images/my_links_badges/mylinks_join_mailing_list.png?1407835385"/></a>
  <a href="https://twitter.com/LiveMTN" target="_blank"><img src="images/Twitter_logo_blue.gif" width="45" height="37" alt="Twitter"/></a>

  <a href="https://soundcloud.com/mixtapenationband" target="_blank"><img src="images/SoundCloud_LogoPack_Dec2013/digital/square/sc_square_42.png" width="42" height="42" alt="SoundCloud" /></a></p>
</div>

混合磁带国家


马上就来

绝对容器居中

.container{
    top: 50%;
    left: 50%;
    width: 100px;
    height:100px;
    margin-top: -50px; /* half the size of the height */
    margin-left: -50px;   /* half the size of the width */
}

---

显然，只有当您有一个固定大小的元素时，使用的居中方法才能起作用，特别是在本例中，600x200像素对应于这些边距。幸运的是，它现在在任何浏览器中都处于中心位置——在我的浏览器中，元素是567x182，但它现在完全取决于字体渲染方法。

<div style="text-align:center" class="centered"> 
  <span style="font-size:72px">Mix Tape Nation</span>
  <br />
  <span style="font-size:24px">Coming Soon</span>
  <br />
  <a href="http://www.flickr.com/photos/126088079@N07/" title="See my photos on Flickr!" target="_blank"><img src="https://s.yimg.com/pw/images/goodies/white-large-chiclet.png" width="44" height="44" alt="Flickr"></a>
  <a href="http://www.reverbnation.com/page_object/join_mailing_list/artist_4333576" target="_blank"><img alt="Mylinks_join_mailing_list" src="http://gp1.wac.edgecastcdn.net/802892/production_static/20140812090746/images/my_links_badges/mylinks_join_mailing_list.png?1407835385"/></a>
  <a href="https://twitter.com/LiveMTN" target="_blank"><img src="images/Twitter_logo_blue.gif" width="45" height="37" alt="Twitter"/></a>

  <a href="https://soundcloud.com/mixtapenationband" target="_blank"><img src="images/SoundCloud_LogoPack_Dec2013/digital/square/sc_square_42.png" width="42" height="42" alt="SoundCloud" /></a></p>
</div>

.container{
    top: 50%;
    left: 50%;
    width: 100px;
    height:100px;
    margin-top: -50px; /* half the size of the height */
    margin-left: -50px;   /* half the size of the width */
}