Question

所以我试图更好地理解我的基本HTML和CSS。不是可见的表格和用于在页面上定义元素的CSS表格。（这对我来说是一个很大的进步！）

我的新网站目前只是一个暂停页面，直到我可以制作新的网站（可能使用Wordpress或类似工具，以便所有乐队成员都可以更改内容而无需太多工作）

该网站为http://mixtapenation.co.uk/

我按照一些教程和网站尝试将保留文本和图标放在页面的中心，无论设备如何。

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

我的代码可能不对，我希望有一种更简单的方法来完成我的工作，

CSS：

.centered{
   /*
        height: 105px;
        width: 469px;
    */
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-300px;
    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;
   }

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>

Answer 1

使用

margin: 0 auto;

将它居中（左，右）

Answer 2

我想你想要的是一个响应式网页，因为没有一个简单的解决方案适用于所有设备。

您可以尝试以下代码：

<强>的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;

删除其他属性。

Demo.

Answer 3

这应该没问题：

<强> 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>

Answer 4

以绝对容器为中心

.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 */
}

将所有设备的保持页面居中 - CSS＆amp; HTML

4 个答案: