在移動視圖中居中對象引導失敗

我遇到了一個相當簡單的「正在建設中」的客戶端網站的問題。我使用Bootstrap進行響應。但是，現在在1024px的寬度下，內容並沒有以它應該的方式爲中心。在移動視圖中居中對象引導失敗

這裏是我使用的代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
    <div id="logo"> 

     <a href="#"> 
     <img id="logo_img" src="img/logo.png"> 
    </a> 

    </div> 
    <div id="underc"> 
    <p>Under Construction</p> 
    </div> 
    <div id="underline"> 
    </div> 
    <div id="social_media"> 

     <a href=""> 
    <img id="fb" src="img/facebook.png"> 
     </a> 
     <a href=""> 
    <img id="tw" src="img/twitter.png"> 
    </a> 
     <a href=""> 
    <img id="ig" src="img/instagram.png"> 
    </a> 

    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

CSS

body { 
     margin: 0; 
     background-image: url("../img/background2.jpg"); 
     /* Set rules to fill background */ 
     min-height: 100%; 
     min-width: 1024px; 

     /* Set up proportionate scaling */ 
     width: 100%; 
     height: auto; 

     /* Set up positioning */ 
     position: fixed; 
     top: 0; 
     left: 0; 
    } 




#underline { 
    height: 5px; 
    background-color: #f57300; 
    margin-bottom: 5px; 
    margin-top: -20px; 
    width: 800px; 
    margin: 0 auto; 
} 
#logo { 
    padding-top: 220px; 
    height: 100px; 
    width: auto; 
    text-align: center; 
} 
#logo_img { 
    height: 250px; 
} 
#underc { 
    color: #f57300; 
    text-align: center; 
    padding-top: 275px; 
    font-family: 'Pacifico', cursive; 
    font-size: 80px; 
} 
#social_media { 
padding-top: 10px; 
text-align: center; 
} 
#fb { 
    height: 30px; 
} 
#tw { 
    height: 30px; 
} 
#ig { 
    height: 30px; 
} 
@media (max-width: 700px) { 
    #underline { 
    height: 5px; 
    background-color: #f57300; 
    margin-bottom: 5px; 
    margin-top: -20px; 
    width: 600px; 
    margin: 0 auto; 
} 
#logo { 
    padding-top: 220px; 
    height: 100px; 
    text-align: center; 
} 
#logo_img { 
    height: 150px; 
    text-align: center; 
} 
#underc { 
    color: #f57300; 
    text-align: center; 
    padding-top: 275px; 
    font-family: 'Pacifico', cursive; 
    font-size: 30px; 
} 
#social_media { 
padding-top: 10px; 
text-align: center; 
} 
#fb { 
    height: 30px; 
} 
#tw { 
    height: 30px; 
} 
#ig { 
    height: 30px; 

} 

}

然而，當屏幕變得「更小」在某個階段它開始堅持右側

HTML頁面的一側，它不居中。

截圖：

來源

2017-06-02 Hendrik B.

所述主體具有的最小寬度屬性

min-width: 1024px;

擦除屬性或使用media queries顯示在不同屏幕上不同的尺寸。

來源

2017-06-02 13:01:36

哦，天啊......謝天謝地，我真的在監督那個。 –

希望是有用的，標記爲正確的答案，如果它幫助你... –

是的，它的工作非常感謝你先生！我已經標記你的答案是正確的。 –

在移動視圖中居中對象引導失敗

回答

相關問題