Question

我试图让我的文本元素像MS字一样居中。我目前正在使用：text-align: center;将文本居中，但结果看起来像是在页面中心左侧刷新而不是按照我想要的方式居中。

这是CSS和HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

我希望在继续之前解决这个问题并且我已经尝试了一段时间但没有运气。

干杯

编辑：在此网站上运行代码段后，文字看起来很好。在我使用我使用的字体的机器上，文本看起来肯定是红色的。造成这种情况的原因是什么？

Answer 1

这是因为我padding-right: 40px;我已更改为20px，但又添加了padding-left: 20px;和lime border，因此您可以看到最新情况。希望有所帮助：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

从padding-right移除#linklist p并在padding-left中添加#linklist p + p，在<p>之后立即添加填充<p>元素

#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;
  font-family: gothambold;
}
#linklist p + p {
  padding-left: 40px;
}

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

为什么我的文本元素没有正确居中？

2 个答案: