[英]How to align body of the webpage to center?
I tried in my CSS such property like text-align: center, but it wasn't working. 我在CSS中尝试了诸如text-align:center这样的属性,但是它不起作用。 Then I tried to set left-margin and right-margin to auto but it is not working too. 然后,我尝试将左页边距和右页边距设置为自动,但是它也无法正常工作。 How else can I center all info of my webpage? 我还能如何将网页的所有信息居中? Here's the code: 这是代码:
<!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>
You can wrap all content in a div, then you would set a width on that div and set the left and right margin to auto. 您可以将所有内容包装在div中,然后在该div上设置宽度,并将左右边距设置为auto。
<head>
<style>
.container {
width: 75%;
margin-left: auto;
margin-right: auto;
</style>
</head>
<body>
<div class="container">
<!-- other content -->
</div>
</body>
You can start with setting body
's text-align:center
, along with some modifications 您可以从设置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>
You just wrap all the content in a div and set margin: 0 auto 您只需将所有内容包装在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>
Give it a width and then the margin. 给它一个宽度,然后给边距。 the margin must be the next element. 边距必须是下一个元素。 such as content, or page. 例如内容或页面。
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>
Wrap the content of body inside a div with class container
, then try this: 使用class container
将body的内容包装在div container
,然后尝试以下操作:
.container{
display: table;
max-width:1200px; /*whatever you want*/
width:auto;
margin:0 auto
}
You need to start working with <div>
. 您需要开始使用<div>
。 After that when you've put your elements within a <div>
assign a width to it: 之后,将元素放入<div>
为其分配宽度:
#container {
width: 100px;
margin: 0 auto;
}
for the following HTML: 适用于以下HTML:
<div id="container">
<h1>Hallo World!</h1>
<p>Bla bla.</p>
</div>
If you for some reason you don't want to use <div>
then assign a fix width to your elements ( h1
and h2
) and set margin: 0 auto;
如果由于某种原因而不想使用<div>
则为元素( h1
和h2
)分配一个固定宽度,并设置margin: 0 auto;
for those elements. 对于那些元素。 This should have the same effect. 这应该具有相同的效果。
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.