尝试在任何浏览器中心内容 [英] Trying to center content on any browser

问题描述

我在这里 http://jsfiddle.net/XQ5c9/ 有以下HTML和CSS。我试图在任何屏幕大小/浏览器中心我的所有内容。目前，一切都偏离中心，在我可以测试的所有屏幕的左边一点。这里是我的CSS（HTML和CSS都在jsfiddle链接）：

I have the following HTML and CSS here http://jsfiddle.net/XQ5c9/. I am trying to center all of my content on any screen size/browser. Currently, everything is off center and a bit to the left on all the screens I can test on. Here is my CSS (both HTML and CSS are in the jsfiddle link):

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);

    html{
    /*  font-family: 'Roboto Condensed', sans-serif;*/
      font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
       font-weight: 20;
    }

    #description{
        position: absolute;
        top: 200px;
        left: 400px;
    }
    #content{
        margin: 0 auto;
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 100%;
        display:table-cell;
        vertical-align: middle; 
    }
    h1{
      color:#4A4A4A;
      margin: 0 auto;
      text-align: center;
    }
    h1:hover{
      color:#4A4A4A;
    }
    h2{
      color:#4A4A4A;
      margin: 0 auto;
      text-align: center;
    }
    h2:hover{
      color:#4A4A4A;
    }
    a{
        color:black;
        text-decoration: none;
      margin: 0px auto;
      width: 400px;
    }
    .circular{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 150px;
      height: 150px;
      border-radius: 75px;
      -webkit-border-radius: 75px;
        -moz-border-radius: 75px;
        background: url(./images/profile_picture.jpg) no-repeat;
      box-shadow: 0 0 8px rgba(0, 0, 0, .8);
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
        -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    }

    ul{
        padding: 0;
      text-align:center; 
      padding-top: 5
    }
    ul a img {
        padding-top: 20px;    
    }
    li{
        list-style: none;
        text-align: center;
        font-size: 30px;
        display: inline-block;
        margin-right: 10px;
    }

    #back{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right: 0;
        z-index: -99999;
        background-color: #f7f7f7;
        background-size: cover;
        background-position: center center;
        opacity: .2;
    }

任何帮助我找出如何集中我的所有内容的帮助将非常感谢。

Any help helping me figure out how to center all my content would be greatly appreciated.

推荐答案

您可能想使用margin auto ...

You might want to use margin auto...

松动位置绝对东西
在你的主div和：

loose the position absolute stuff In your main div and put:

margin-top：50％;
margin-left：auto;
margin-right：auto;

margin-top: 50%; margin-left: auto; margin-right: auto;

您可以使用line-height代替margin-top。

You might use line-height instead of margin-top.

这篇关于尝试在任何浏览器中心内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！