Demo fiddle

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

js fiddle：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;
}

编辑：删除了连字符类并调整了css顺序以获得IE8兼容性 - 感谢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

不是很干净..但不过是一个解决方案：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 5

Demo fiddle

如果你想使用一些jQuery（例如，如果你不能改变你的HTML），另一种选择可能是：

HTML

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

CSS

.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%;
}

的jQuery

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

然后，您可以根据需要轻松设置表格样式。我不确定需要什么样的居中，但你可以将整个表格放在中心位置（例如，在带有table {margin: 0 auto}的CSS中），或者你可以右对齐第一列（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
}

visual

这应该在<dl> <dt> <dd>列表中标记，因为它类似于词典。：）

对齐特定字符上的文本

7 个答案:

Demo fiddle