Question

我想将文字“我的主页”放在我制作的框中间。我在网站上看到了一个示例，但由于文本位于左侧，因此无法正常工作。我该如何修复代码？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
  background-color: #d2b48c;
  margin-left: 20%; 
  margin-right: 20%;
  border: 1px dotted gray;
  padding: 10px 10px 10px 10px;
  font-family: sans-serif;
}
</style>
</head>
<body>
<div style="width: ???px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto;">
<h1 id="begin"> My homepage </h1>
</div>

Answer 1

您还可以看到：Block-level and inline elements

HTML

<div id="container">
  <h1>My homepage</h1>
</div>

CSS

#container h1 {
    text-align: center;
}

我还建议您阅读：Descendant selectors，Child selectors和Adjacent sibling selectors

Answer 2

一个简单的CSS系列：

#container > h1 { text-align: center; }

Answer 3

<h1>是一个块级元素，因此您只需在CSS中使用text-align设置样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
My homepage
</title>
<style type="text/css">
body {
  background-color: #d2b48c;
  margin-left: 20%; 
  margin-right: 20%;
  border: 1px dotted gray;
  padding: 10px 10px 10px 10px;
  font-family: sans-serif;
}
h1 {
  text-align: center;
}
</style>
</head>
<body>
<h1 id="begin"> My homepage </h1>
</body>
</html>

Answer 4

也许将所有文字设置在开头的中心，然后决定你想要不居中的内容，

* {    text-align: center;    
       margin: 0;
       padding: 0;   
  }

您也可以使用通用选择器（*）将一些或所有元素置于开头。或者最初修复在您的页面上非常常见的任何提议。

Answer 5

您只需使用css text-align：

设置h1样式

text-align: center;

您不需要将h1包装成div，因为h1是块级元素

DEMO：http://jsfiddle.net/Vinyl/Ltqyfwn0/

HTML：框中间的标题

5 个答案: