Question

我无法编码1px水平分隔线，中间显示的徽标为纯CSS。应该是这样的： Divider with logo centered

多个实例出现问题：当我在一个页面上添加更多分隔符时，只会显示一两个分隔线，其他分区只会显示该标识。

这里回答了有关居中徽标的问题 - 但没有人解决多个实例发生的错误：Divider with centred image in CSS?

以下是该讨论的改编解决方案，如下所示。

CSS：

body {
  margin: 0;
  background: white;
}

header:after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}

.logo {
  position: relative; /* Brings the div above the header:after element */
  width: 200px;
  height: 100px;
  padding: 40px;
  margin: 0 auto;
  background: white url("http://placehold.it/200x100") no-repeat center center;
}

.logo img {
  display: block;
}

HTML：

    <body>
      <header>
      <div class="logo">
      </div>

      <div class="logo">
      </div>

      <div class="logo">
      </div>

      </header>
    </body>

小提琴： http://jsbin.com/delixecobi/edit?html,css,output

Answer 1

我完全改变了CSS。给.logo一个position: relative和:after一个position: absolute。您正在将它用于一个单个标头。这就是为什么它不起作用的原因。

＆＃13;

body {
  margin: 0;
  background: white;
}

.logo:after {
  content: ' ';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: -50%;
  width: 200%;
}

.logo {
  position: relative; /* Brings the div above the header:after element */
  width: 200px;
  height: 100px;
  padding: 40px;
  margin: 0 auto;
  background: white url("http://placehold.it/200x100") no-repeat center center;
}

.logo img {
  display: block;
}

＆＃13;

<header>
  <div class="logo">
  </div>
  <div class="logo">
  </div>
  <div class="logo">
  </div>
</header>

＆＃13;

预览

如果您希望线条不交叉或剪切，请使用否定的z-index。

Answer 2

我找到了一个解决方案，我的问题是如何让文本居中在div中 - 感谢web-tiki的方法：Line before and after title over image

在JSBin中，我将所有内容放在一起并对其进行了格式化/评论，以便于使用。你会发现：

分隔符格式为 img，text 和多行文字
在多个实例中稳定

＆＃13;

body {
  margin: 0;
  background: white;
}

.logo:after {
  content: ' ';
  display: block;
  width: 100%;
  height: 1px;
  background: #ccc;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: -50%;
  width: 200%;
  z-index: -1;
}

.logo {
  position: relative;
  /* Brings the div above the header:after element */
  width: 200px;
  height: 100px;
  padding: 20px;
  /* also padding between line and logo */
  margin: 0 auto;
  background: white url("http://placehold.it/200x100") no-repeat center center;
}

.logo img {
  display: block;
}

.logotext {
  width: 100%;
  margin: 20 auto;
  overflow: hidden;
  text-align: center;
  font-weight: 300;
  color: green;
  /* color text */
}

.logotext:before,
.logotext:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 20 0 -55%;
  /* 2nd no: space text to line on the left */
  vertical-align: middle;
  border-bottom: 1px solid #ccc;
  /* last: color line */
}

.logotext:after {
  margin: 0 -55% 0 20;
  /* last no: space text to line on the right */
}

span {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<header>
  <div class="logo">
  </div>
  <div class="logo">
  </div>

  <div class="logotext">
    somesome</div>

  <div class="logotext">
    somesome</div>


</header>

＆＃13;

此解决方案的一个主要缺点是它不允许将线宽定义为主视口的％。

CSS中居中徽标的分隔符 - 使用多个实例时的奇怪错误

2 个答案: