Question

是否可以将动态文本对齐到左侧框的中间？

没有CSS的元素的初始显示看起来像这样，因为所有元素都对齐到同一个边框：

       Text
       |
       Another text

但我试图达到这个效果：

      Text
       |
  Another text

我不知道如何正确解释它，所以我创建了一个JSFiddle来展示它：https://jsfiddle.net/pkpy27oh/

我想将带有边框的div上下文字居中。当您知道它将采用静态字符串的空间但是使用动态字符串时，可以调整负边距，而这不是可以使用预定义的负边距完成的。我试图只使用CSS而不使用JavaScript。

我试图建立一个最大宽度，将中间的文本对齐到其容器中，然后将负边距设置为该最大宽度的一半，但我想知道是否有更好的方法来执行此操作。

Answer 1

您可以使用display：inline-block和text-align：center：

Example Updated

<div class="container">
  <div class="inline-block">
    <div>Text</div>
    <div style="border-left: 1px solid #000; display: inline-block;">&nbsp;</div>
    <div>Longer text</div>
  </div>
</div>

.container {
  margin: 10px 50px;
  text-align: left;
}

.inline-block {
  display: inline-block;
  text-align: center;
  transform: translateX(-50%);
}

Answer 2

这肯定是一个奇怪的要求。如果transform:translateX符合您的要求，您可以尝试：

.container {
  margin: 10px 50px;
}

.offset {
  display:inline-block;
  transform: translateX(-50%);
}

Problem:

<div class="container">
  <div class="offset">Text</div>
  <div style="border-left: 1px solid #000;">&nbsp;</div>
  <div class="offset">Longer text</div>
</div>

Expected result:

<div class="container">
  <div style="margin-left: -15px">Text</div>
  <div style="border-left: 1px solid #000;">&nbsp;</div>
  <div style="margin-left: -35px">Longer text</div>
</div>

display:inline-block将元素折叠到其最短宽度，transform:translateX(-50%)将其宽度偏移一半。

Answer 3

只需将容器中心放在容器中，然后给边框宽度为1px的div。

<div class="container" style="text-align: center;">
  <div>Text</div>
  <div style="border-left: 1px solid #000; width: 1px; margin-left: auto; margin-right: auto;">&nbsp;</div>
  <div>Longer text</div>
</div>

https://jsfiddle.net/pkpy27oh/8/

将文本对齐到其中间的框边框

3 个答案: