从两个并排的子div中的父div中浮动文本？

Question

我不确定我是否在思考这个问题，但我有一个网站，其中我有一个这样组织的部分：

<div id="parent">
<p>Some Text</p>
  <div id="child1"></div>
  <div id="child2"></div>
</div>

#child1和#child2没有内容，只有大小相同的背景图片。我想要做的是将文本集中浮动在两个div元素上。

在此页面上，由于背景图像大小无法设置容器的大小，我使用快速JS解决方案根据图像的宽高比设置div的高度。这是在这里工作，但我无法弄清楚如何将文本放在子div上而不是在它们之前。

编辑：这是一个示例图像，两种颜色代表两种不同的背景图像。

Answer 1

您可以将图片显示为inline-block，以便它们位于同一行，并使用text-align: center将您的所有内容集中在#parent div中。

＆＃13;

＆＃13;

#parent{
  text-align: center;
}

.image{
  height: 100px;
  width: 100px;
  background-size: cover;
  display: inline-block;
}

#child1{
  background-image: url("https://pstbqpil.files.wordpress.com/2012/03/seagull-in-the-foreground-robert-moses-bridge-in-the-background-vicki-jauron.jpg");
}

#child2{
  background-image: url("http://betterphotography.in/wp-content/uploads/2012/05/890362_56513892.jpg");
}

＆＃13;

<div id="parent">
<p>Some Text</p>
  <div id="child1" class="image"></div>
  <div id="child2" class="image"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下选项：

＆＃13;

＆＃13;

#parent {
  width: 400px;
  height: 400px;
  position: relative;
}
#child1 {
  background: url(https://dummyimage.com/200x400/F00/FFF);
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#child2 {
  background: url(https://dummyimage.com/200x400/0F0/FFF);
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
#parent p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: white;
  margin: 0;
  padding: 0;
}

＆＃13;

<div id="parent">
<p>Some Text</p>
  <div id="child1"></div>
  <div id="child2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

下面的演示使用位置绝对方法。

<div id="parent">
  <p class="text">Some Text</p>
  <div id="child1"></div>
  <div id="child2"></div>
</div>

所有内容都包含在父div中，因此您可以随意移动它。

只需用CSS中的URL链接替换背景颜色。

希望这是你正在寻找的东西！ ：）

https://jsfiddle.net/xf87jgLq/45/