Question

我有一个父容器，其中包含一些文本（匿名块）和一个子元素（ div 或伪 - 元素）。我正在查看Image Replacement Museum，但不确定我的案例的最佳解决方案是什么。

我需要隐藏文字并仍然显示内部 div 。

<div class="parent">
   Some text
   <!--<div class="child">
   </div>-->
</div>

.parent {
    display:table;
}
.child,
.parent:after {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}
.parent:after {
    content: "Icon";
}

如何隐藏“某些文字”在流程中维护我的子元素（所以没有position:absolute;孩子应该调整父级的大小）并垂直/水平居中？

注意：我知道的唯一尺寸是孩子的width ;所有其他措施应该是灵活的，不应做出假设。

[编辑] 我需要保持对屏幕阅读器的支持，以便仍然可以读取原始文本。

此外，对于我来说，将文本包装在元素中并不总是可行的（我想要一个CSS解决方案）。

Answer 1

考虑到约束，我怀疑父母font-size:0，并且孩子的font-size:1rem重置将是最佳的。

.parent {
  display: table;
  border: 1px solid grey;
  font-size: 0;
  margin-bottom: 1rem;
}
.child,
.pseudo:after {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 1rem;
  padding: 1em;
  background: lightblue;
}
.pseudo:after {
  content: "Icon";
}

<div class="parent pseudo">
  Some text
  <!--<div class="child">
   </div>-->
</div>

<div class="parent">
  Some text
  <div class="child">Child
  </div>
</div>

Answer 2

你做不到。您需要将文本包装在span或者您想要的标签中。

<div class="parent">
   <span>Some text</span>
   <div class="child">
   </div>
</div>

.parent {
    display:table;
}
.parent > span {
    visibility : hidden;
}
.child {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

替换匿名内容，但不替换子元素

2 个答案: