我试图让我的文本元素像在 MS Word 中一样居中。
我目前正在使用: text-align: center; 使文本居中，但结果看起来像是在页面中央向左刷新，而不是按照我想要的方式居中。
这是 CSS 和 HTML:
#onp {
text-align: center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
@font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
@font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 40px;
font-family: gothambold;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>我想在继续之前解决这个问题，但我已经尝试了一段时间但没有成功。
干杯
编辑:在该网站上运行代码片段后，文本看起来不错。在我使用的字体的机器上，文本看起来肯定是红的。这是什么原因造成的？
最佳答案
这是因为你的 padding-right: 40px; 我改成了 20px 但还添加了 padding-left: 20px; 和一个 石灰边框这样你就可以看到发生了什么......希望有帮助:
#onp {
text-align:center;
font-family: gothambold;
font-size: 20px;
letter-spacing: 20px
}
h1 {
font-size: 80px;
font-family: gothambold;
text-align: center;
}
@font-face {
font-family: gothambold;
src: url(gothambold.ttf)
}
@font-face {
font-family: gothamlight;
src: url(gothamlight.ttf)
}
#linklist {
text-align: center;
width: 500px;
height: 50px;
padding-top: 30px;
margin: auto;
}
#linklist p {
display: inline;
padding-right: 20px;
padding-left: 20px;
font-family: gothambold;
border: solid 1px lime;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>x - home</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#ffeeee;">
<h1>XXX XXXXXX</h1>
<p id="onp"> online portfolio</p>
<div id="linklist">
<p>photography</p>
<p>design</p>
<p>case study</p>
<p>contact</p>
</div>
</body>
</html>关于html - 为什么我的文本元素没有正确居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44304935/