2つのside-by-side子divの親divからのフローティングテキスト？

Question

私はこれをoverthinkingていますかどうかわからないんだけど、私はこのように編成された部分を持っているウェブサイトを持っている：

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

#child1と#child2は内容を持たないが、唯一の背景画像をしています同じサイズの私がしたいことは、2つのdiv要素の上にテキストを中央に浮かべることです。

このページでは、背景画像のサイズでコンテナのサイズを設定できないため、画像のアスペクト比に基づいてdivの高さを設定するためのクイックJSソリューションを使用します。これはここで働いていますが、私はどのようにそれらの前にではなく、子divの上にテキストを持っているのか分かりません。

編集：画像の例を示します。この2色は、2種類の背景画像を表しています。

Answer 1

あなたはinline-blockとして、あなたの画像を表示することができますので、彼らは同じ行にあることとあなたの#parent divの内側にすべてのコンテンツを中心にtext-align: centerを使用します。ここで

#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"); 
 
}

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

Answer 2

あなたが使用できるオプションです。

#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; 
 
}

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

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/