Html 将多个较小的单词与一个较大的单词对齐？

我正在学习如何编写HTML和CSS，并决定在此过程中创建自己的网站

我的问题是：我如何将较小的文本与较大的对象对齐，例如，指向网站上不同页面的链接在我的全名下整齐对齐，链接与我全名开头和结尾对齐

我知道描述它可能有点混乱，所以下面是我的意思：

有什么建议吗？ 谢谢

链接刷新到我全名的开头和结尾

当你设计网站的时候，摆脱这种想法的习惯。这将给您带来无尽的麻烦和挫折，因为这取决于浏览器渲染（可能还有渲染错误）、用户字体大小、用户字体以及其他无法控制的因素。与其追求“像素精度”，不如让它在大多数情况下看起来尽可能好

在设计这样的东西时，首先考虑标记。你写的东西的结构是什么？在您的链接图像中，

全名在我看来就像一个标题（可能是
h1
），而现在这样的菜单通常是作为样式化的无序列表（
ul
）完成的。下面是一个例子，我可能会作出类似的东西是什么在你的形象

以下是标记：

<div id="container">
    <h1>Full Name</h1>
    <ul>
        <li>music</li>
        <li>film</li>
        <li>web</li>
        <li>photo</li>
    </ul>
</div>


全名

音乐
胶卷
网
照片


和使用的CSS，以及注释：

#container { border: 1px solid; }
h1 { 
    margin-bottom: 0;
    text-align: center; 
}
ul { 
    margin: 0.5em;
    /* remove default padding inserted by browser */
    padding-left: 0;
    /* no bullets */
    list-style-type: none;
    /* this works on inline objects, not just text */
    text-align: center;
}
li {
    /* hybrid of inline and block; obeys text-align */
    /* Also note this does not work in IE <9. Workarounds exist. */
    display: inline-block;
    padding: 3px;
}

#容器{边框：1px实心；}
h1{
页边距底部：0；
文本对齐：居中；
}
ul{
边缘：0.5em；
/*删除浏览器插入的默认填充*/
左侧填充：0；
/*没有子弹*/
列表样式类型：无；
/*这适用于内联对象，而不仅仅是文本*/
文本对齐：居中；
}
李{
/*内联和块的混合；遵循文本对齐*/
/*另外请注意，这在IE中不起作用无论标题长度如何，您都可以近似外观和设计，但最终，CSS不会提供您所需的精确印刷工具，一旦您知道实际文本的长度，您将不得不以某种方式推动百分比


HTML:

你尝试过什么吗？是的，我尝试过为每个单词声明固定的边距，这几乎奏效-它们在大词的每一端都没有完全对齐。我还尝试过设置宽度，这产生了相同的结果。我使用了错误的方法吗？非常感谢！但我没有投票反对你。我只有15岁才能这样做，很明显，我不会的！我试着投你的票，但没用。不用担心。有人否决了我的答案，因为它显示了-1，我想知道为什么我可以改进它。哦，好吧。希望我能帮上忙。[编辑：PS，如果您认为它是正确的，或者您打算使用它，您可以通过单击复选框以接受它作为正确答案来表示]这是一个很好的解决方案。但是，请注意，我必须调整JSFIDLE窗口的大小才能看到它。第一次单击时，标题被包装，效果丢失。（尽管看起来仍然不错。）请记住，当你设计网站时，仅仅因为你这么看，我向你保证其他所有人都不会。我不确定你的意思。我不是建议你改变你的想法。我对你的答案表示赞赏并投了赞成票。
<div id="container">
    <h1>Large Title Here Etc</h1>
    <div id="sub">
        <span>music</span>
        <span>film</span>
        <span>web</span>
        <span>photo</span>
    </div>
</div>

body {
    text-align: center;
}

#container {
    display: inline-block;
}

h1 {
    font-size: 2em;
}

#sub {
    font-size: 1em;
    display: table;
    width: 120%;
    box-sizing: border-box;
    margin: 0 -10%;
}

#sub span {
    display: table-cell;
    padding: 0 2%;
}