堆棧內存溢出
  簡體   English   中英

我如何集中我的標題？

[英]How do I center my heading?

 原文  2016-10-22 10:20:13  3   5    javascript/ html/ css

問題描述

我的標題，'sKoolTalk'不合適，我嘗試了幾種方法來使它居中但是沒有用。 我嘗試使用position: absolute並對齊它，但它沒有響應。 我希望這個標題是這樣的：

無論寬度如何，它應該如何在所有設備上顯示。

這是我的代碼： 

 function displaySignInError() { var schoolName = document.getElementById('schoolNameBox').value.toLowerCase(); switch (schoolName) { case 'new horizon gurukul': window.location = "NHGLogin.php"; break; default: var schoolErrorMessage = document.getElementById('schoolErrorMessage'); schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist."; schoolErrorMessage.style.color = 'red'; } } 
 @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i'); body { height: 100vh; } #abhimanyu { z-index: -1; background-color: green; width: 50%; float: left; height: 50%; } #arjun { z-index: -1; background-color: orange; width: 50%; float: right; height: 50%; } #bheem { z-index: -1; background-color: red; width: 50%; float: left; height: 50%; } #eklavya { z-index: -1; background-color: purple; float: right; width: 50%; height: 50%; } #container { width: 30em; background-color: #eee; height: 30em; border-radius: 50%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } #wrapper { width: 30rem; height: 30rem; border-radius: 50%; } #schoolSubmitButton { margin-top: 35px; text-align: center; background-color: white; border: 2px solid #fef; height: 2em; width: 10em; } #schoolName { margin-bottom: 40px; position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #schoolNameBox { height: 2em; border: none; width: 26em; margin-left: 0; padding-left: 10px; } #schoolSubmitButton p { position: relative; top: 50%; position: relative; top: 30%; left: 50%; transform: translate(-50%, -70%); transform: -webkit-translate(-50%, -70%); transform: -ms-translate(-50%, -70%); } /* ::-webkit-input-placeholder { padding-left: 10px; } :-moz-placeholder { padding-left: 10px; } :-ms-input-placeholder { padding-left: 10px; } */ #schoolErrorMessage { text-decoration: none; position: relative; top: 6em; color: black; width: 140%; float: left; font-size: 15px; position: relative; right: 20%; } #schoolNameDiv { position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #main-heading { color: green; text-decoration: none; position: absolute; left: 43%; right: 57%; font-size: 24px; z-index: 10; } #main-heading h2 span { color: orange; } #schoolAvatar { height: 9em; width: 9em; border-radius: 50%; position: fixed; top: 25%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } .footerHR { border-top: 1px solid grey; position: absolute; bottom: 20px; margin-bottom: 20px; } 
 <!DOCTYPE html> <html> <head> <title>NHG</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link type="text/css" rel="stylesheet" href="css/normalize.css"/> <link type="text/css" rel="stylesheet" href="css/style.css"/> <link type="text/css" rel="stylesheet" href="css/resposive.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <div id="abhimanyu"></div> <div id="arjun"></div> <br> <div id="bheem"></div> <div id="eklavya"></div> <header> <div id="main-head"> <!-- REMEMBER TO STYLE THE HEADING AND SIGN UP LINK --> <a href="#" id="main-heading"><h2><span>sKool</span>Talk</h2></a> </div> </header> <section> <div id="container"> <div id="wrapper"> <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle"> <div id="schoolNameDiv"> <div id="schoolName"> <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name..."> <br> <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();"> <p>Next</p> </button> <br> </div> <br> <p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p> </div> </div> </div> </section> <br> <footer> <div class="footerHR"> </div> </footer> <script src="JS/script.js"></script> </body> </html>

5 個解決方案

解決方案1
 0  2016-10-22 10:37:41

如果您希望文本正好居中，那就是這樣！ 

 <!DOCTYPE html> <html> <head> <title>NHG</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="css/normalize.css" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="css/resposive.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style> @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i'); body { height: 100vh; } #abhimanyu { z-index: -1; background-color: green; width: 50%; float: left; height: 50%; } #arjun { z-index: -1; background-color: orange; width: 50%; float: right; height: 50%; } #bheem { z-index: -1; background-color: red; width: 50%; float: left; height: 50%; } #eklavya { z-index: -1; background-color: purple; float: right; width: 50%; height: 50%; } #container { width: 30em; background-color: #eee; height: 30em; border-radius: 50%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } #wrapper { width: 30rem; height: 30rem; border-radius: 50%; } #schoolSubmitButton { margin-top: 35px; text-align: center; background-color: white; border: 2px solid #fef; height: 2em; width: 10em; } #schoolName { margin-bottom: 40px; position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #schoolNameBox { height: 2em; border: none; width: 26em; margin-left: 0; padding-left: 10px; } #schoolSubmitButton p { position: relative; top: 50%; position: relative; top: 30%; left: 50%; transform: translate(-50%, -70%); transform: -webkit-translate(-50%, -70%); transform: -ms-translate(-50%, -70%); } /* ::-webkit-input-placeholder { padding-left: 10px; } :-moz-placeholder { padding-left: 10px; } :-ms-input-placeholder { padding-left: 10px; } */ #schoolErrorMessage { text-decoration: none; position: relative; top: 6em; color: black; width: 140%; float: left; font-size: 15px; position: relative; right: 20%; } #schoolNameDiv { position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #main-heading { color: green; text-decoration: none; position: absolute; font-size: 24px; z-index: 10; text-align : center; } #main-head{ position: absolute; width: 100%; text-align: center; top: 10%; } #main-heading h2 span { color: orange; } #schoolAvatar { height: 9em; width: 9em; border-radius: 50%; position: fixed; top: 25%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } .footerHR { border-top: 1px solid grey; position: absolute; bottom: 20px; margin-bottom: 20px; } </style> </head> <body> <div id="abhimanyu"></div> <div id="arjun"></div> <br> <div id="bheem"></div> <div id="eklavya"></div> <header> <div id="main-head"> <h2>sKool Talk</h2> </div> </header> <section> <div id="container"> <div id="wrapper"> <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle"> <div id="schoolNameDiv"> <div id="schoolName"> <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name..."> <br> <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();"> <p>Next</p> </button> <br> </div> <br> <p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p> </div> </div> </div> </section> <br> <footer> <div class="footerHR"> </div> </footer> <script src="JS/script.js"></script> </body> </html>

這是我認為你更接近你的想法 

 <html><head> <title>NHG</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="css/normalize.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/resposive.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <style> @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i'); body { height: 100vh; } #abhimanyu { z-index: -1; background-color: green; width: 50%; float: left; height: 50%; text-align: right; } #abhimanyu h2 { position: relative; top: 10%; padding-right: 5px; color: orange; } #arjun { z-index: -1; background-color: orange; width: 50%; float: right; height: 50%; text-align: left; } #arjun h2 { position: relative; top: 10%; padding-left: 5px; color: green; } #bheem { z-index: -1; background-color: red; width: 50%; float: left; height: 50%; } #eklavya { z-index: -1; background-color: purple; float: right; width: 50%; height: 50%; } #container { width: 30em; background-color: #eee; height: 30em; border-radius: 50%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } #wrapper { width: 30rem; height: 30rem; border-radius: 50%; } #schoolSubmitButton { margin-top: 35px; text-align: center; background-color: white; border: 2px solid #fef; height: 2em; width: 10em; } #schoolName { margin-bottom: 40px; position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #schoolNameBox { height: 2em; border: none; width: 26em; margin-left: 0; padding-left: 10px; } #schoolSubmitButton p { position: relative; top: 50%; position: relative; top: 30%; left: 50%; transform: translate(-50%, -70%); transform: -webkit-translate(-50%, -70%); transform: -ms-translate(-50%, -70%); } /* ::-webkit-input-placeholder { padding-left: 10px; } :-moz-placeholder { padding-left: 10px; } :-ms-input-placeholder { padding-left: 10px; } */ #schoolErrorMessage { text-decoration: none; position: relative; top: 6em; color: black; width: 140%; float: left; font-size: 15px; position: relative; right: 20%; } #schoolNameDiv { position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #main-heading { color: green; text-decoration: none; position: absolute; font-size: 24px; z-index: 10; text-align : center; } #main-head{ position: absolute; width: 100%; text-align: center; top: 10%; } #main-heading h2 span { color: orange; } #schoolAvatar { height: 9em; width: 9em; border-radius: 50%; position: fixed; top: 25%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } .footerHR { border-top: 1px solid grey; position: absolute; bottom: 20px; margin-bottom: 20px; } </style> </head> <body> <div id="abhimanyu"> <h2>sKool</h2> </div> <div id="arjun"> <h2>sKool</h2> </div> <br> <div id="bheem"></div> <div id="eklavya"></div> <section> <div id="container"> <div id="wrapper"> <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle"> <div id="schoolNameDiv"> <div id="schoolName"> <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name..."> <br> <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();"> <p>Next</p> </button> <br> </div> <br> <p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p> </div> </div> </div> </section> <br> <footer> <div class="footerHR"> </div> </footer> <script src="JS/script.js"></script> </body></html>

解決方案2
 0  2016-10-22 10:41:49

而不是position: absolute; 嘗試text-align : center; 在#text-heading

解決方案3
 0 已采納  2016-10-22 10:47:39

首先，我將你的標題分為兩個部分。 他們的h2寬度的父元素：100％。 h2（跨度）的子寬度為50％，其中一個為'float：left'，其中一個為'float：right'，之后的文本對齊屬性設置了它們在頁面上的位置。 

 function displaySignInError() { var schoolName = document.getElementById('schoolNameBox').value.toLowerCase(); switch (schoolName) { case 'new horizon gurukul': window.location = "NHGLogin.php"; break; default: var schoolErrorMessage = document.getElementById('schoolErrorMessage'); schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist."; schoolErrorMessage.style.color = 'red'; } } 
 @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i'); body { margin : 0px; height: 100vh; } #abhimanyu { z-index: -1; background-color: green; width: 50%; float: left; height: 50%; } #arjun { z-index: -1; background-color: orange; width: 50%; float: right; height: 50%; } #bheem { z-index: -1; background-color: red; width: 50%; float: left; height: 50%; } #eklavya { z-index: -1; background-color: purple; float: right; width: 50%; height: 50%; } #container { width: 30em; background-color: #eee; height: 30em; border-radius: 50%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } #wrapper { width: 30rem; height: 30rem; border-radius: 50%; } #schoolSubmitButton { margin-top: 35px; text-align: center; background-color: white; border: 2px solid #fef; height: 2em; width: 10em; } #schoolName { margin-bottom: 40px; position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #schoolNameBox { height: 2em; border: none; width: 26em; margin-left: 0; padding-left: 10px; } #schoolSubmitButton p { position: relative; top: 50%; position: relative; top: 30%; left: 50%; transform: translate(-50%, -70%); transform: -webkit-translate(-50%, -70%); transform: -ms-translate(-50%, -70%); } /* ::-webkit-input-placeholder { padding-left: 10px; } :-moz-placeholder { padding-left: 10px; } :-ms-input-placeholder { padding-left: 10px; } */ #schoolErrorMessage { text-decoration: none; position: relative; top: 6em; color: black; width: 140%; float: left; font-size: 15px; position: relative; right: 20%; } #schoolNameDiv { position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #main-heading { text-decoration: none; position: absolute; font-size: 24px; z-index: 10; display: block; text-align: center; width: 100%; } #main-heading h2 span:first-child { color: orange; display: inline-block; width: 50%; float: left; text-align: right; } #main-heading h2 span:nth-child(2) { color: green; display: inline-block; width: 50%; float: right; text-align: left; } #schoolAvatar { height: 9em; width: 9em; border-radius: 50%; position: fixed; top: 25%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } .footerHR { border-top: 1px solid grey; position: absolute; bottom: 20px; margin-bottom: 20px; } 
 <!DOCTYPE html> <html> <head> <title>NHG</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link type="text/css" rel="stylesheet" href="css/normalize.css"/> <link type="text/css" rel="stylesheet" href="css/style.css"/> <link type="text/css" rel="stylesheet" href="css/resposive.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <div id="abhimanyu"></div> <div id="arjun"></div> <br> <div id="bheem"></div> <div id="eklavya"></div> <header> <div id="main-head"> <!-- REMEMBER TO STYLE THE HEADING AND SIGN UP LINK --> <a href="#" id="main-heading"><h2><span>sKool</span><span>Talk</span></h2></a> </div> </header> <section> <div id="container"> <div id="wrapper"> <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle"> <div id="schoolNameDiv"> <div id="schoolName"> <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name..."> <br> <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();"> <p>Next</p> </button> <br> </div> <br> <p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p> </div> </div> </div> </section> <br> <footer> <div class="footerHR"> </div> </footer> <script src="JS/script.js"></script> </body> </html>

解決方案4
 0  2016-10-22 10:50:36

解： 

#main-heading {
  color: green;
  text-decoration: none;
  text-align:center;
  font-size: 24px;
  z-index: 30;
  position: absolute;
   width: 100%;
}


 function displaySignInError() { var schoolName = document.getElementById('schoolNameBox').value.toLowerCase(); switch (schoolName) { case 'new horizon gurukul': window.location = "NHGLogin.php"; break; default: var schoolErrorMessage = document.getElementById('schoolErrorMessage'); schoolErrorMessage.innerHTML = "Please Enter a valid school name, still if invalid schoold does not exist."; schoolErrorMessage.style.color = 'red'; } } 
 @import url('https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Droid+Sans:400,700|Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i|Oxygen:300,400,700|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Ubuntu:300,300i,400,400i,500,500i,700,700i'); body { height: 100vh; } #abhimanyu { z-index: -1; background-color: green; width: 50%; float: left; height: 50%; } #arjun { z-index: -1; background-color: orange; width: 50%; float: right; height: 50%; } #bheem { z-index: -1; background-color: red; width: 50%; float: left; height: 50%; } #eklavya { z-index: -1; background-color: purple; float: right; width: 50%; height: 50%; } #container { width: 30em; background-color: #eee; height: 30em; border-radius: 50%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } #wrapper { width: 30rem; height: 30rem; border-radius: 50%; } #schoolSubmitButton { margin-top: 35px; text-align: center; background-color: white; border: 2px solid #fef; height: 2em; width: 10em; } #schoolName { margin-bottom: 40px; position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #schoolNameBox { height: 2em; border: none; width: 26em; margin-left: 0; padding-left: 10px; } #schoolSubmitButton p { position: relative; top: 50%; position: relative; top: 30%; left: 50%; transform: translate(-50%, -70%); transform: -webkit-translate(-50%, -70%); transform: -ms-translate(-50%, -70%); } /* ::-webkit-input-placeholder { padding-left: 10px; } :-moz-placeholder { padding-left: 10px; } :-ms-input-placeholder { padding-left: 10px; } */ #schoolErrorMessage { text-decoration: none; position: relative; top: 6em; color: black; width: 140%; float: left; font-size: 15px; position: relative; right: 20%; } #schoolNameDiv { position: fixed; top: 60%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); text-align: center; } #main-heading { color: green; text-decoration: none; text-align:center; font-size: 24px; z-index: 30; position: absolute; width: 100%; } #main-heading h2 span { color: orange; } #schoolAvatar { height: 9em; width: 9em; border-radius: 50%; position: fixed; top: 25%; left: 50%; transform: translate(-50%, -50%); transform: -webkit-translate(-50%, -50%); transform: -ms-translate(-50%, -50%); } .footerHR { border-top: 1px solid grey; position: absolute; bottom: 20px; margin-bottom: 20px; } 
 <!DOCTYPE html> <html> <head> <title>NHG</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link type="text/css" rel="stylesheet" href="css/normalize.css"/> <link type="text/css" rel="stylesheet" href="css/style.css"/> <link type="text/css" rel="stylesheet" href="css/resposive.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <header> <div id="main-head"> <!-- REMEMBER TO STYLE THE HEADING AND SIGN UP LINK --> <a href="#" id="main-heading"><h2><span>sKool</span>Talk</h2></a> </div> </header> <div id="abhimanyu"></div> <div id="arjun"></div> <br> <div id="bheem"></div> <div id="eklavya"></div> <section> <div id="container"> <div id="wrapper"> <img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle"> <div id="schoolNameDiv"> <div id="schoolName"> <input type="text" name="schoolName" id="schoolNameBox" placeholder="Enter your School Name..."> <br> <button type="submit" id="schoolSubmitButton" onclick="displaySignInError();"> <p>Next</p> </button> <br> </div> <br> <p id="schoolErrorMessage">School Doesn't exist? Tell your principal about our website now!</p> </div> </div> </div> </section> <br> <footer> <div class="footerHR"> </div> </footer> <script src="JS/script.js"></script> </body> </html>

解決方案5
 0  2016-10-22 11:47:00

給#main-head固定寬度和： 

#main-head {
position :absolute;
top:0;
bottom:0;
left:0;
right:0;
}

要么 

#main-head {
width:100px;
margin:0 auto;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我如何使旋轉木馬居中？ 如何將頁面居中？ 如何單獨更改標題？ 如何在我的網站上將按鈕居中？ 如何將移動菜單的內容居中？ 如何將我的圖像固定在中心？ 如何在我當前的位置html5上居中放置地圖 如何在不影響繪圖的情況下使畫布居中 如何使用iframe在標簽中居中放置Google地圖標記 ESDoc 將我所有的模塊方法放在一個標題下，而不是在每個文件下，我該如何更改此行為？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM