居中文本和缩小元素以适合显示内联块的元素

Question

我正在为我的网站创建一个导航栏，我到处寻找并尝试了一些东西，但我无法弄清楚我捏造的东西：P

无论如何，我有一些名为＆＃39; nav-box＆＃39;他们把导航元素放在里面。我有这些显示的内联块，使它们看起来像导航元素。

现在有两件事，这些盒子里面的文字贴在盒子的左边，我必须把它们放在中心位置。除此之外，盒子看起来真的很大。我是否必须手动设置宽度，或者我可以使css合适吗？

这是我用我的代码创建的JSFiddle。我尝试过添加＆＃39; inline-block＆＃39;对于元素和它的父容器，但它们都不适用于这种情况：（

这是我尝试过的：

.nav > .nav-content > .nav-inner {
    width: auto;
    float: right;
    text-align: center;
}

正如您所看到的那样，我的父元素包含nav-box元素，我添加了text-align: center;，但它仍然没有做我需要的。

http://jsfiddle.net/qhPwt/

Answer 1

框内的文字未与中心对齐，因为框内的内容已应用margin-right。

选中 FIDDLE

CSS更改

.nav > .nav-content > .nav-inner > .nav-box > .nav-link:last-child {
    margin-right: 80px; // Remove this style
}