0

我有一个包含一些文本（匿名块）和一个子元素（一个div或一个伪元素）的父容器。我正在查看图像替换博物馆，但不确定什么是我的案例的最佳解决方案。

我需要隐藏文本并仍然显示内部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 解决方案）。

4

2 回答 2

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>

于 2015-11-24T15:05:12.107 回答
0

你不能。您需要将文本包装在像 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;
}
于 2015-11-24T14:24:31.320 回答