Question

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

这是我的代码

的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的自举

Answer 1

首先，center tag is deprecated。

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

您需要制作.MainPart position: absolute并将transform: translateY(50%)更改为transform: translateY(-50%)。

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

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

Answer 2

当单词太长而不适合时，大文本只会左对齐。

图标有填充权限但没有填充左边，因此它们永远不会居中。你在宽屏幕上没有注意到它，但在狭窄的屏幕上它变得明显。

（我也注意到，虽然你有前缀属性，但你有时会忘记不动产，例如transform中的.Icon）

网站不以移动为中心

2 个答案: