如何证明我的垂直导航链接的合理性和中心性

Question

如果我理解Justify是如何工作的，它将填充或删除我所说的所需间距，使其与其他宽度相同。我的问题是我想让我的链接居中，同时合理，我想添加一些间距，以便其他链接与PORTFOLIO对齐。

我尝试给div text-align: center，并为我的每个a代码创建了一个类，并给它一个text-align: justify。可悲的是，它没有工作，我迷失了。

#side-nav-menu {
    width: 40%;
    position: fixed;
    text-align: center;
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: translate(0, -50%);
    display: none;
}

#side-nav-menu ul li a {
    text-align:justify;
    color: white;
}

编辑：

像这样的东西

Answer 1

我认为你可以用flexbox来捣乱：

.container {
    width: 200px;
    height: 300px;
    padding: 5px;
    background: #555;
    color: white;
    font-size: 24px;
}

.item {
    display: flex;
    justify-content: space-between;
}

<div class="container">
    <div class="item">
        <i>F</i><i>i</i><i>r</i><i>s</i><i>t</i>        
    </div>
    <div class="item">
        <i>S</i><i>e</i><i>c</i><i>o</i><i>n</i><i>d</i>        
    </div>
    <div class="item">
        <i>L</i><i>a</i><i>s</i><i>t</i>        
    </div>
</div>

Flexbox to justify text

Answer 2

这对于上班来说是一个巨大的痛苦，但这里是：

Example fiddle

以下是相关代码：

<强>的JavaScript

$('#side-nav-menu li a').each(function() {
   var t = $(this),
       letters = $(this).text().split(''),
       width = $(this).width(),
       output = "";
    for (var i=0,l=letters.length;i<l;i++){
        output += "<span style='width:" + ((i===(l-1)) ? 0 : width/(l-1)) +"px;'>" + letters[i] + "</span>";
    }
    t.html(output);
});

<强> CSS

body {
    background-color: #999;
    font-family: sans-serif;
}
#side-nav-menu {
    width: 200px;
    position: fixed;
    text-align: center;
    top: 50%;
    bottom: auto;
    left: auto;
    right: auto;
    transform: translate(0, -50%);
    list-style: none;
    padding: 0;
    margin: 0;
}
#side-nav-menu li {
    height: 30px;
}

#side-nav-menu li a {
    display: block;
    color: white;
    text-align: justify;
}

#side-nav-menu li a span {
    display: inline-block;
}

<强> HTML

<ul id="side-nav-menu">
    <li>
        <a>HOME</a>
    </li>
    <li>
        <a>BLOG</a>
    </li>
    <li>
        <a>ABOUT</a>
    </li>
    <li>
        <a>RESUME</a>
    </li>
    <li>
        <a>PORTFOLIO</a>
    </li>
    <li>
        <a>PROFILES</a>
    </li>
    <li>
        <a>CONTACT</a>
    </li>
</ul>

更新 - 更酷的方式

如果您要使用等宽字体，可以执行以下操作：

<强> Fiddle with monospace

这里与第一个有什么不同：

<强> CSS

body {
    background-color: #999;
    font-family: monospace;
}

<强>的JavaScript

for (var i=0,l=letters.length;i<l;i++){
    output += "<span style='font-size:" + width/l +"px;'>" + letters[i] + "</span>";
}

示例输出：

Answer 3

我能想到这样做的最好方法就是这样（为简洁起见使用内联样式）。 内联块元素使用必要的最小空间，这可以派上用场。

＆＃13;

＆＃13;

li {
  display: block;
  }

＆＃13;

<div style="text-align: center; width: 100%;">
  <div style="text-align: left; display: inline-block;">
    <ul>
      <li>
        Home
      </li>
      <li>
        Blog
      </li>
      <li>Supercalafragilistic</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

基本上你需要的是UL（容器）要居中，而LI（内容）要左对齐，但我知道的方式需要在容器上设置宽度。

ul {
    display: block;
    margin: auto;
    width: 40%;}

li {
    display: block;
    text-align: left;}

为了使其尽可能居中，宽度需要比最长的单词宽一点。您可以使用该值，直到它完全居中。

Answer 5

＆＃39; text-align：justify＆＃39;样式使渲染引擎改变空白跨度的宽度，使得行的宽度都相同（除了尾随的孤立行）。由于您的锚文本没有空格跨度，渲染引擎无法执行任何操作。

您需要调整的是letter-spacing样式。这是一个不同的StackOverflow答案，其中有一些jQuery显示了它是如何完成的： Stretch text to fit width of div

但是我提醒你：＆＃34; HOME＆＃34;之间的长度不同。和＆＃34; PORTFOLIO＆＃34;当你把单词长度相同时，可能看起来很奇怪。