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

我正试图让我的文本元素像MS word中的一样居中。 我目前正在使用：

text align:center

将文本居中，但结果看起来像是在页面中央左对齐，而不是按我希望的方式居中

以下是CSS和HTML：

#onp{
文本对齐：居中；
字体系列：gothambold；
字体大小：20px；
字母间距：20px
}
h1{
字号：80px；
字体系列：gothambold；
文本对齐：居中；
}
@字体{
字体系列：gothambold；
src:url（gothambold.ttf）
}
@字体{
字体系列：gothamlight；
src:url（gothamlight.ttf）
}
#链接列表{
文本对齐：居中；
宽度：500px；
高度：50px；
填充顶部：30px；
保证金：自动；
}
#链接列表p{
显示：内联；
右边填充：40px；
字体系列：gothambold；
}

x-home
XXX XXXXXX
在线投资组合
摄影

设计

案例研究

接触

这是因为你的

填充正确：40px我改为
20px
，但也添加了
左填充：20px
和
石灰边框
，这样您就可以看到发生了什么。。希望这有助于：


#onp{
文本对齐：居中；
字体系列：gothambold；
字体大小：20px；
字母间距：20px
}
h1{
字号：80px；
字体系列：gothambold；
文本对齐：居中；
}
@字体{
字体系列：gothambold；
src:url（gothambold.ttf）
}
@字体{
字体系列：gothamlight；
src:url（gothamlight.ttf）
}
#链接列表{
文本对齐：居中；
宽度：500px；
高度：50px；
填充顶部：30px；
保证金：自动；
}
#链接列表p{
显示：内联；
右边填充：20px；
左侧填充：20px；
字体系列：gothambold；
边框：固体1px石灰；
}

x-home
XXX XXXXXX
在线投资组合
摄影

设计

案例研究

接触

从
#链接列表p
中删除
右侧填充
，并在
#链接列表p+p
中添加
左侧填充
，它添加了填充
元素，这些元素紧跟在
之后


#onp{
文本对齐：居中；
字体系列：gothambold；
字体大小：20px；
字母间距：20px
}
h1{
字号：80px；
字体系列：gothambold；
文本对齐：居中；
}
@字体{
字体系列：gothambold；
src:url（gothambold.ttf）
}
@字体{
字体系列：gothamlight；
src:url（gothamlight.ttf）
}
#链接列表{
文本对齐：居中；
宽度：500px；
高度：50px；
填充顶部：30px；
保证金：自动；
}
#链接列表p{
显示：内联；
字体系列：gothambold；
}
#链接列表p+p{
左侧填充：40px；
}

x-home
XXX XXXXXX
在线投资组合
摄影

设计

案例研究

接触

谢谢，这在我的横向列表中起到了作用，但“在线投资组合”仍在刷新中me@T.Little如果你不能重现这个问题，很难说是什么原因造成的。但是我会激活我的魔术师灯并尝试：）好的，说真的，你已经包含了一些改变样式的css或js。使用网站检查器，从上到下移动元素，然后你就会找到它。我最终删除了“在线公文包”，并将其放在我的菜单栏中。你关于填充的技巧帮助我解决了未来任何类似的问题。这很有效，但正如我告诉卡兰巴的那样，“谢谢你，这在我的横向列表中起了作用，但‘在线投资组合’对我来说仍然很有用。”