Question

有些聪明人写了下面的代码并且它有效（文本以两条线为中心两侧）。

＆＃13;

h1 {
  width: 90%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #000;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}

＆＃13;

<h1>Text Centered</h1>

＆＃13;

但我不明白如何计算margin-left和margin-right的值-55%。如果你把它改成别的东西，那就不行了。

Answer 1

好的，我会试一试。

每个伪元素都是标题的50％宽......但是因为里面标题（通常是一行......它会中断

请参阅：

h1 {
  width: 90%;
  margin: .7em auto;
  text-align: center;
  font-weight: 300;
  color: #000;
  border: 1px solid red;
}
h1:before,
h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {}

<h1>Text Centered</h1>

我们不希望这样......所以我们通过添加负边距将它们推向一边。

h1 {
  width: 90%;
  margin: .7em auto;
  text-align: center;
  font-weight: 300;
  color: #000;
  border: 1px solid red;
}
h1:before,
h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -50%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -50% 0 .5em;
}

<h1>Text Centered</h1>

然而，这些线条现在已经开箱即用......我们不希望如此。我们通过在标题中添加overflow:hidden来解决此问题。

h1 {
  width: 90%;
  margin: .7em auto;
  text-align: center;
  font-weight: 300;
  color: #000;
  border: 1px solid red;
  overflow: hidden;
}
h1:before,
h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}

<h1>Text Centered</h1>

至于为什么55％具体我不能说除了它高于50％以确保线元素在变窄时不会断裂。

Answer 2

-55％将元素向右和向左移动h1元素宽度的55％，将0.5 em向上移动文本大小的一半。由于添加的元素具有边框底部，因此现在位于h1的垂直中间并略微位于h1之外（距离h1的宽度的5％：50％=半加5％）。顺便说一句，它与其他值一起工作，这里改为-60％：

＆＃13;

h1 {
  width: 90%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #000;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -60%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -60% 0 .5em;
}

＆＃13;

<h1>Text Centered</h1>

＆＃13;

负边距和文字对齐：中心

2 个答案: