1. 首页
  2. 问答
  3. 如何将网页正文与中心对齐？

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

2015-08-08 57 views
0

我尝试在我的CSS这样的属性，如文本对齐：中心，但它不工作。然后我尝试将左边距和右边距设置为自动，但它不起作用。我还能如何集中网页的所有信息？下面的代码：如何将网页正文与中心对齐？

<!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> 


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

来源

2015-08-08 user1925442

回答

3

你可以用所有内容在一个div，那么你会设置该div的宽度，设置左右边距为自动。

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

来源

2015-08-08 15:51:45

+0

这将围绕75％的宽度容器里面的内容，但他们不会在这里面的容器，我认为居中是他想。 – Malcom

+0

是的，文本不会居中，这只是在页面上给一个居中的容器。我认为那是他所问的，但我可能是错的。另请注意，宽度的75％只是一个任意值，它可以是任何宽度，但需要为宽度设置一些值。 –

+0

嗯，这解决了他的问题，所以他可能只是寻找一个容器，而不是每个元素居中。 “我怎么能中心我的网页的所有信息”让我错了。 – Malcom

0

你只是包装在一个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=...&amp;output=embed"></iframe> 
    <p><b>© Yevhenii Zhdan</b></p> 
</div>

来源

2015-08-08 15:53:54 hansottowirtz

0

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

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>

来源

2015-08-08 15:54:13

0

裹体与container阶级一个div里面的内容，那就试试这个：

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

来源

2015-08-08 15:55:32 optimus

0

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

来源

2015-08-08 15:57:03 Tushar

0

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

来源

2015-08-08 15:58:02

0 

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>

来源

2015-08-08 16:47:11

0 

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

来源

2015-08-08 16:51:29

相关问题

 相关问题