如何將網頁的正文對齊中心？
[英]How to align body of the webpage to center?
問題描述
我在CSS中嘗試了諸如text-align：center這樣的屬性，但是它不起作用。 然后，我嘗試將左頁邊距和右頁邊距設置為自動，但是它也無法正常工作。 我還能如何將網頁的所有信息居中？ 這是代碼：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yevhenii Zhdan">
<style type="text/css">
body {
padding: 20px;
}
h1, h2 {
font-weight: normal;
color: #0088dd;
margin: 0px;
text-align: center;
}
h1 {
background-image: url("images/bob.gif");
background-repeat: no-repeat;
text-indent: -9999px;
padding-bottom: 3%;
}
h2 {
padding: 10px;
width: 12em;
font-family: "Gill Sans", Arial, sans-serif;
font-size: 90%;
text-transform: uppercase;
letter-spacing: 0.2em;
border: 2px solid #0088dd;
border-right: none;
border-bottom: none;
}
</style>
</head>
<body>
<h1>YZhdan</h1>
<h2><b>How to find me:</b></h2>
<br />
<iframe
width="450"
height="350"
src="https://www.google.com.ua/maps?q=...&output=embed">
</iframe>
<p><b>© Yevhenii Zhdan</b></p>
</body>
</html>
body { padding: 20px; } h1, h2 { font-weight: normal; color: #0088dd; margin: 0px; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; }
<h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed"> </iframe> <p><b>© Yevhenii Zhdan</b> </p>
8 個解決方案
解決方案1
3 已采納 2015-08-08 15:51:45
您可以將所有內容包裝在div中，然后在該div上設置寬度，並將左右邊距設置為auto。
<head>
<style>
.container {
width: 75%;
margin-left: auto;
margin-right: auto;
</style>
</head>
<body>
<div class="container">
<!-- other content -->
</div>
</body>
解決方案2
1 2015-08-08 15:57:03
您可以從設置body的text-align:center ，並進行一些修改
body { padding: 20px; text-align:center; } h1, h2 { font-weight: normal; color: #0088dd; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { display:inline; padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; }
<h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed" style="margin-top: 30px;"> </iframe> <p><b>© Yevhenii Zhdan</b> </p>
解決方案3
1 2015-08-08 16:51:29
body { padding: 20px; text-align:center; } .container { text-align: center; } h1, h2 { font-weight: normal; color: #0088dd; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { display:inline; padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; margin: 0 auto; }
<div class="container"> <h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed" style="margin-top: 30px;"> </iframe> <p><b>© Yevhenii Zhdan</b> </p> </div>
解決方案4
0 2015-08-08 15:53:54
您只需將所有內容包裝在div中並設置邊距：0自動
<div class="content" style="
width: 500px;
margin: 0 auto;
">
<h1>YZhdan</h1>
<h2>
<b>How to find me:</b>
</h2>
<br>
<iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed"></iframe>
<p><b>© Yevhenii Zhdan</b></p>
</div>
解決方案5
0 2015-08-08 15:54:13
給它一個寬度，然后給邊距。 邊距必須是下一個元素。 例如內容或頁面。
width: 90%;
margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yevhenii Zhdan">
<style type="text/css">
body {
padding: 20px;
}
content{
width: 90%;
margin: 0 auto;
}
h1, h2 {
font-weight: normal;
color: #0088dd;
margin: 0px;
text-align: center;
}
h1 {
background-image: url("images/bob.gif");
background-repeat: no-repeat;
text-indent: -9999px;
padding-bottom: 3%;
}
h2 {
padding: 10px;
width: 12em;
font-family: "Gill Sans", Arial, sans-serif;
font-size: 90%;
text-transform: uppercase;
letter-spacing: 0.2em;
border: 2px solid #0088dd;
border-right: none;
border-bottom: none;
}
</style>
</head>
<body>
<content>
<h1>YZhdan</h1>
<h2><b>How to find me:</b></h2>
<br />
<iframe
width="450"
height="350"
src="https://www.google.com.ua/maps?q=...&output=embed">
</iframe>
</content>
</body>
解決方案6
0 2015-08-08 15:55:32
使用class container將body的內容包裝在div container ，然后嘗試以下操作：
.container{
display: table;
max-width:1200px; /*whatever you want*/
width:auto;
margin:0 auto
}
解決方案7
0 2015-08-08 15:58:02
您需要開始使用<div> 。 之后，將元素放入<div>為其分配寬度：
#container {
width: 100px;
margin: 0 auto;
}
適用於以下HTML：
<div id="container">
<h1>Hallo World!</h1>
<p>Bla bla.</p>
</div>
如果由於某種原因而不想使用<div>則為元素（ h1和h2 ）分配一個固定寬度，並設置margin: 0 auto; 對於那些元素。 這應該具有相同的效果。
解決方案8
0 2015-08-08 16:47:11
body { padding: 20px; } .container { text-align: center; } h1, h2 { font-weight: normal; color: #0088dd; margin: 0px; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; margin: 0 auto; }
<div class="container"> <h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed"> </iframe> <p><b>© Yevhenii Zhdan</b> </p> </div>
HTML / CSS：如何將鏈接鏈接到另一個網站與網頁中心->嘗試在CSS中將鏈接鏈接到中心…無效
[英]HTML / CSS: How to align link to another website to Center of Webpage --> Tried Align Link to Center in CSS … did not work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.