大家好,大家都很熟悉物化。
我想做分隔线:

<div class="divider"></div>


看起来类似于:
css - 用中间的文字实现divier-LMLPHP

基本上是中间带有文本的divier。
有没有人有办法解决吗?如果不使用材料divier,即使使用其他html和css也可以

谢谢

最佳答案

我喜欢用固定高度的div包裹文本。然后position: relative div中的文本。请参见下面的代码段。



.wrapper {
  background-color: black;
  height: 1px;
  margin: 32px 0 0;
  text-align: center;
}

span {
  position: relative;
  top: -8px;
  padding: 0 15px;
  font-weight: 500;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 1em;
  color: #000000;
  background: #ffffff;
}

<div class="wrapper">
  <span>OR</span>
</div>

关于css - 用中间的文字实现divier,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52913179/

10-12 03:34