在特定字符上对齐文本 [英] Aligning text on a specific character

问题描述

我有这个要在中心对齐的单词列表，每个列表项都包含两个单词，中间用'-'(连字符)分隔.我有一种简单的方法可以对齐连字符上的点吗?现在，当单词长度不同时，连字符就不再居中了.

I have this list of words i want to align on the center, every list item consists of two words divided by a '-'(hyphen). Is there an easy way i can align spot on the hyphen? When words are different in lenght now, the hyphen isn't in the center anymore.

为了弄清楚我的问题我做了个小提琴: http://jsfiddle.net/seLvC/

I've made a fiddle to make my problem clear: http://jsfiddle.net/seLvC/

我当前的代码:

.progress-ww {
  font-size: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}

<section>
  <div class="progress-ww">
    <div>
      <div>lopen - ik loop</div>
      <div>klimmen - ik klim</div>
      <div>geven - ik geef</div>
      <div>schreeuwen - ik schreeuw</div>
      <div>blozen - ik bloos</div>
    </div>
  </div>
</section>

推荐答案

实现此目的的一种方法是将spans放在连字符左右两侧的单词周围. 然后，您可以为这些字符添加一个最小宽度，以使它们等于宽度，这会将连字符放在中间.

One way of achiveing this is to place spans around the words on the left and right side of the hyphen. Then you can add a min-width to these to make them equal width which will put the hyphen in the center.

小提琴

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;


}
.progress-ww span {
    display:inline-block;
    width:100px;
    text-align:left;
}
.progress-ww span:first-of-type {
    text-align:right
}

<section>
    <div class="progress-ww">
        <div>
            <div><span>lopen</span> - <span>ik loop</span></div>
            <div><span>klimmen</span> - <span>ik klim</span></div>
            <div><span>geven</span> - <span>ik geef</span></div>
            <div><span>schreeuwen</span> - <span>ik schreeuw</span></div>
            <div><span>blozen</span> - <span>ik bloos</span></div>
        </div>
    </div>
</section>

以下是使用Flex的此解决方案的更新版本.这种解决方案意味着您不必在跨度上设置任何固定的标准.

Below is an updated version for this solution using flex. This solution means you don't have to set any fixed witdths on the spans.

.progress-ww div {
  display: flex;
}

.progress-ww div span {
  flex: 1;
}

.progress-ww div span:first-of-type {
  text-align: right;
  padding-right: 5px;
}

.progress-ww div span:last-of-type {
  padding-left: 5px;
}

<section>
  <div class="progress-ww">
    <div><span>lopen</span> - <span>ik loop</span></div>
    <div><span>klimmen</span> - <span>ik klim</span></div>
    <div><span>geven</span> - <span>ik geef</span></div>
    <div><span>schreeuwen</span> - <span>ik schreeuw</span></div>
    <div><span>blozen</span> - <span>ik bloos</span></div>
  </div>
</section>

这篇关于在特定字符上对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！