在特定字符上对齐文本

Question

我有一个我想在中心对齐的单词列表，每个列表项由两个单词组成，除以“-”（连字符）。有没有一种简单的方法可以在连字符上对齐点？现在，当单词的长度不同时，连字符不再位于中心。

我做了一个小提琴来澄清我的问题： 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>

Answer 1

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

Fiddle

.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 的更新版本

以下是此解决方案使用 flex 的更新版本。此解决方案意味着您不必在跨度上设置任何固定宽度。

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

Answer 2

我假设您没有被锁定在使用该 html 结构。因此，我不仅会使用列表项来显示这一系列项目，还会将它们的每个部分包装在span 标签中。 此解决方案的好处是您不会被锁定在左右部分的任意宽度（您只需要担心连字符的宽度）

js 小提琴：http://jsfiddle.net/seLvC/8/

HTML

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

CSS

*,
*:before,
*:after{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;
}
ul{
    list-style-type:none;
}
    ul li{
        width:100%;
        position: relative;
    }
        ul li span{
            position: absolute;
            right:0;
            left:50%;
            text-align:left;
            padding-left:5px;
            display:inline-block;
        }
        ul li span:first-child{
            position: absolute;
            left:0;
            right:50%;
            text-align:right;
            padding-right:5px;
            display:inline-block;
        }
.hyphen{
    display:inline-block;
    width:10px;
}

编辑：删除连字符类并调整 IE8 兼容性的 css 顺序 - 感谢 GCyrillus 的建议

Answer 3

正如我在其他答案中建议的那样，如果语义很重要，这可以使用 <dl> 标签：

<div class="progress-ww">
  <dl>
    <dt>lopen</dt><dd>ik loop<br/>zij lopen</dd>
    <dt>klimmen</dt><dd>ik klim</dd>
    <dt>geven</dt><dd>ik geef</dd>
    <dt>schreeuwen</dt><dd>ik schreeuw</dd>
    <dt>blozen</dt><dd>ik bloos<br/>je bloos<br/>hij bloss</dd>
  </dil>
</div>

使用 css

.progress-ww {
  text-align:center;
  width:260px;
  /* margin : auto ; maybe ? */

}
dt , dd {
  width:100px;
  display:inline-block;
  vertical-align:top;
  margin:0;
  padding:0 5px 0 0;
}
dt {text-align:right;}
dd {text-align:left;}
dt:after {content:' -';}

DEMO

Answer 4

Demo fiddle

如果您想使用一些 jQuery（例如，如果您无法更改 HTML），另一种选择可能是：

$('.progress-ww div').each(function() {
  var part = $(this).text().split(' - ')
  $(this).replaceWith("<div class='right'>" + part[0] + "</div><div class='left'>" + part[1] + "</div>");
});

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

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.right:after {
  content: ' -';
  margin-right: 5px;
}

.left,
.right {
  display: inline-block;
  width: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="progress-ww">
  <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>

Answer 5

不是很干净.. 但仍然是一个解决方案：http://jsfiddle.net/seLvC/5/。

CSS

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

.hyp {
    position:relative;
}
.first, .second {
    position:absolute;
    top:0;    
}
.first {
    right:18%;     
    padding-right:35%;
}
.second {
    left:18%;     
    padding-left:35%;
}

抱歉，我更改了您的 HTML：

    <div class="hyp">
        -
        <div class="first">ik loop </div>
        <div class="second">lopen</div>
      </div>
      <div class="hyp">
        -
        <div class="first">klimmen </div>
        <div class="second">ik klim</div>
      </div>
      <div class="hyp">
        -
        <div class="first">geven  </div>
        <div class="second">ik geef</div>
      </div>
      <div class="hyp">
        -
        <div class="first">schreeuwen</div>
        <div class="second">ik schreeuw</div>
      </div>
      <div class="hyp">
        -
        <div class="first">blozen </div>
        <div class="second">ik bloos</div>
      </div>



      </div>

Answer 6

不，没有简单的方法来对齐特定的字符，实际上也没有办法使用给定的 HTML 标记。

最好将标记更改为表格，因为这是迄今为止实现所需外观的最可靠方式（即使 CSS 已关闭）。这也是最合乎逻辑的方法，因为数据在结构上是一个对应表。如果我们采用dl的HTML5原理作为描述列表（而不是定义列表，如最初定义的那样），使用dl不会错。但它并没有什么特别的好处，而且会引起一些并发症。

例子：

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

然后，您可以根据需要轻松设置表格样式。我不确定需要哪种居中，但您可以将表格作为一个整体居中（例如，在 CSS 中使用table {margin: 0 auto}），或者您可以右对齐第一列（td:first-child { text-align: right }）。

如果内容中没有连字符，标记会更加合乎逻辑。如果这更适合您，您可以省略它们并使用 :before 伪元素在 CSS 中生成它们。

（我不会在这里使用连字符“-”；人类语言通常不会那样使用连字符。我会使用破折号“-”或者冒号“:”，这通常用于分隔单词范式中的形式。）

Answer 7

您可以将文本包装在 inline-block 框中并设置 width，重置 text-align 并给出负值 margin 以将其大小几乎减少为零： http://jsfiddle.net/seLvC/2/

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;
}
.progress-ww span {
    display:inline-block;
    width:100px;/* give it a width */
    margin:0 -100px 0 0;/* 0 space needed on right side */
    text-align:left;
}
.progress-ww span:first-of-type {
    margin:0 0 0 -100px;/* 0 space needed on left side */
    text-align:right
}

这应该被标记在 <dl> <dt> <dd> list 中，因为它类似于字典。 :)