Question

我在CSS中尝试了像text-align：center这样的属性，但它没有工作。然后我尝试将左边距和右边距设置为自动，但它也不起作用。我怎样才能将我的网页的所有信息都集中在一起？这是代码：

left: 337px

＆＃13;

<!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=...&amp;output=embed">
        </iframe>
        <p><b>&#169; Yevhenii Zhdan</b></p>
    </body>

</html>

＆＃13;

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;
}

＆＃13;

Answer 1

您可以将所有内容包装在div中，然后在该div上设置宽度并将左右边距设置为自动。

<head>
    <style>
        .container {
            width: 75%;
            margin-left: auto;
            margin-right: auto;
    </style>
</head>
<body>
    <div class="container">
    <!-- other content -->
    </div>
</body>

Answer 2

您只需将所有内容包装在div中并设置margin：0 auto

<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=...&amp;output=embed"></iframe>
  <p><b>© Yevhenii Zhdan</b></p>
</div>

Answer 3

给它一个宽度，然后是边距。保证金必须是下一个要素。例如内容或页面。

 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=...&amp;output=embed">
        </iframe>
      </content>
    </body>

Answer 4

使用类container将body的内容包装在div中，然后尝试：

.container{
     display: table;
     max-width:1200px; /*whatever you want*/
     width:auto;
     margin:0 auto
}

Answer 5

您可以先设置body的{{1}}，然后再进行一些修改

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;
 }

Answer 6

您需要开始使用<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;对于那些元素。这应该具有相同的效果。

Answer 7

    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=...&amp;output=embed">
    </iframe>
    <p><b>&#169; Yevhenii Zhdan</b>
    </p>
</div>

Answer 8

<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=...&amp;output=embed" style="margin-top: 30px;">
</iframe>
<p><b>&#169; Yevhenii Zhdan</b>
</p>  
</div>

otherwise

如何将网页正文与中心对齐？

8 个答案: