使流体div居中并排填充剩余区域

Question

我需要重新看一下下一个问题，因为我完全陷入了困境（我已经尝试了很多-表格，背景，表单元格显示的：before和：after，但收效甚微）。

我有一个固定宽度的“包装纸”（例如1000px）的div。 然后我有内部构造：线，按钮，文本，按钮，线。 按钮具有固定的宽度，但文本没有固定的宽度。 因此，可能是下一种情况：

1：-------------------- <一些文本> --------------------

2：---------------------- <不，> -----------------------

3：-------------- <内部较大的内部文本> --------------

如您所见，文本应始终居中，但左右两行应填充左右两边的剩余区域。

有可能在CSS中做吗？ 还是只有jQuery？

预先感谢您的帮助。 很高兴有任何链接和提示）

Answer 1

尝试这个。
CSS

  p{position:relative;text-align: center;}
  p:after{
    content:'';
    position:absolute;
    top: 50%;
    width: 100%;
    left: 0;
    border-top:1px dashed #000;
    z-index: 1;
  }
  p span{
    display: inline-block;
    background: #fff;
    position: relative;
    z-index: 2;
    padding: 0 10px;
  }

HTML： <p><span>asdadasdas</span></p>