网站不以手机为中心答案

【问题标题】：Website not centering on mobile网站不以手机为中心
【发布时间】：2015-11-14 01:02:23
【问题描述】：

我的网站在桌面上看起来很时髦，但在移动设备上看起来很糟糕，页面被推到左边并且居中完全被破坏了

这是我的代码

Index.php：

<!DOCTYPE html>




<!-- I know my codes messy -->
<!-- If you dont agree and want to -->
<!-- Hire me just need someone to speak to or think you can help -->
<!-- Shoot me a email: marley@marleyplant.com -->
<!-- Or you can tweet me: @MarleyJPlant -->




<html>
    <head>
        <meta name="description" content="MarleyJPlant Graphic Design Coding And Gaming" />
        <meta name="keywords" content="Marley Joseph Plant, MarleyPlant, Marley Plant, Marley, Arduduck, Simon Hedley, YRS, Young Rewired, Rewired State, Young Rewired State, YRS 2015, Best In Design, MarleyJPlant, Young Rewired Winner" />
        <meta name="author" content="metatags generator">
        <meta name="robots" content="index, follow">
        <meta name="revisit-after" content="1 days">
        <link rel=”author” href=”https://plus.google.com/u/1/101486183104153864417/”/>
        <title>Marley Joseph Plant</title>
        <!-- Marley Plant, Marley Joseph Plant, MarleyJPlant -->

        <meta content='width=device-width, initial-scale=1' name='viewport'/>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/navigate.js"></script>
        <script type="text/javascript" src="js/Icons.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    </head>
    <body>
        <div class="MainPart">
        <div class="title">
            <center><h1 class="title" >Marley Plant</h1></center>
        </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <div class="social">
            <center>
                <a href="http://facebook.com/MarleyJPlant"  alt="Facebook" class="fa fa-facebook fa-5x Icon"></a>
                <a href="http://twitter.com/MarleyJPlant"  alt="Twitter" class="fa fa-twitter fa-5x Icon"></a>
                <a href="http://github.com/MarleyPlant"  alt="Github" class="fa fa-github fa-5x Icon"></a>
                <a href="http://blog.marleyplant.com"  alt="WordPress" class="fa fa-wordpress fa-5x Icon"></a>
                <a href="https://vine.co/u/1245502532772581376" alt="Vine" class="fa fa-vine fa-5x Icon"></a>
                <a href="https://www.youtube.com/channel/UCDoR3fPDtLjqgR_9fNPt_mw" alt="youtube" class="fa fa-youtube-play fa-5x Icon"></a>
                <a href="http://steamcommunity.com/id/Flaffle" alt="steam" class="fa fa-steam fa-5x Icon"></a>
                <a href="https://www.flickr.com/photos/134060533@N05/" alt="Flickr" class="fa fa-flickr fa-5x Icon"></a>
                <a href="http://instagram.com/marleyjplant/"  alt="Instagram" class="fa fa-instagram fa-5x Icon"></a>
                <a href="http://stackoverflow.com/users/5330908/marleyjplant?tab=profile" alt="Stack Overflow" class="fa fa-stack-overflow fa-5x Icon"></a>
            </center>
        </div>
    </body>

</html>

main.css：

.title{
    color: #5E6973;
    font-family: universe;
    text-align: center;
    font-size: 125px;
}

.MainPart{
      position: relative;
      top: 50%;
      transform: translateY(50%);
}

body{
    background-image: url("/images/background.jpg");
}

::-webkit-scrollbar { 
    display: none; 
}

.Icon{
    text-decoration: none;
    padding-right: 40px;
    padding-bottom: 30px;
    color: #7CFFC4;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
}

.Icon:hover{
    -webkit-transform:scale(1.5,1.5);
    -moz-transform:scale(1.5,1.5);
    -o-transform:scale(1.5,1.5);
}

@font-face {
    font-family: universe;
    src: url('Universe.ttf');
}

.social{
    align: center;
}

.jumbotron{
    background-image: url("/images/background2.png");
}

您可以在http://marleyplant.com 找到实时版本我检查了我的 iphone 5 和我的诺基亚 lumia 920 的居中看起来都一样

我正在使用这些库的：

FontAwesome jQuery 引导

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

首先，center tag is deprecated。

其次，您没有正确垂直居中。

你需要把你的.MainPartposition: absolute改成transform: translateY(50%)到transform: translateY(-50%)。

这将带来水平居中问题，您需要添加left: 50%并将translateY(-50%)更改为translate(-50%, -50%);

工作示例：http://codepen.io/anon/pen/WQLKva

【讨论】：

【解决方案2】：

只有当单词太长而无法容纳时，大文本才会左对齐。

图标有 padding-right 但没有 padding-left，所以它们永远不会居中。在宽屏幕上你不会注意到它，但在窄屏幕上它会变得很明显。

（我还注意到，虽然您有前缀属性，但您有时会忘记实际属性，例如 .Icon 中的 transform）

【讨论】：

我已经修复了左侧填充问题，但我将如何解决文本问题
我会缩小它以适应窄屏幕。如果人们无法阅读它，它无论如何都会被破坏，无论是否居中。