[英]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>
您可以将所有内容包装在div中,然后在该div上设置宽度,并将左右边距设置为auto。
<head>
<style>
.container {
width: 75%;
margin-left: auto;
margin-right: auto;
</style>
</head>
<body>
<div class="container">
<!-- other content -->
</div>
</body>
您可以从设置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>
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>
您只需将所有内容包装在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>
给它一个宽度,然后给边距。 边距必须是下一个元素。 例如内容或页面。
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>
使用class container
将body的内容包装在div container
,然后尝试以下操作:
.container{
display: table;
max-width:1200px; /*whatever you want*/
width:auto;
margin:0 auto
}
您需要开始使用<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;
对于那些元素。 这应该具有相同的效果。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.