对齐特定字符上的文本

Question

我有这个单词列表我希望在中心对齐,每个列表项由两个单词组成' - '(连字符).有没有一种简单的方法可以在连字符上对齐？当单词长度不同时,连字符不再位于中心.

我已经做了一个小问题来解决我的问题:http: //jsfiddle.net/seLvC/

我目前的代码:

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

Answer 1

实现此目的的一种方法是spans在连字符的左侧和右侧放置单词.然后你可以为它们添加一个最小宽度,使它们等于宽度,这将连字符放在中心.

小提琴

.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>