Divコンテナがブラウザウィンドウのサイズを変更しながら移動しています

Question

詳細な説明：

2つのコンテナの両方が最大ブラウザウィンドウの50％を保持しています。彼らは並んでいます。これらの容器には、ボタンのように設計された2つのより大きな容器がある。このよう

： Example

今私の問題は、私はdivを左から右への私のブラウザのサイズを変更する場合であるが遠ざかっているが、私は、彼らがどこにいる彼らが滞在したいです。私が唯一DIV2のための投稿のdiv 2と4の

<div id='picturediv2' class="image2"> 
<div class="ghost2"> 
<a id="LK2" class="TFG2" target="_blank" href="some link here" style="color:black;">Test2</a> 
</div> 
</div> 

そして、いくつかのCSSコード：

<div id='picturediv1' class="image"> 
<div class="ghost"> 
<a id="LK2" target="_blank" href="hehehe">Some link here</a> 
</div> 
</div> 

ここDIV3及びDIV4のためのいくつかのコード：ここで

は路Div1とDIV2のためのいくつかのコードがありますそれらは両方とも最も同一であるためです。 DIV2のため

CSS：

 .ghost 
      { 
       /* position centered */ 
       display:inline-block; 
       position: absolute; 
       margin-top:20%; 
       margin-left:50%; 
       -webkit-transform: translateX(-50%) translateY(-50%); 
       -ms-transform: translateX(-50%) translateY(-50%); 
       transform: translateX(-50%) translateY(-50%); 
       /* text styles */ 
       font-family: Tahoma, Verdana, Segoe, sans-serif; 
       font-size: 13pt; 
       letter-spacing: 0.3em; 
       color:#ffffff; 
       /* modify text */ 
       text-decoration:none; 
       text-transform:uppercase; 
       text-rendering:optimizeLegibility; 
       /* add a border */ 
       border:0.15em solid #fff; 
       padding:0.4em 0.6em; 
       /* animate the change */ 
       -webkit-transition: color 300ms, background 500ms, border-color 700ms; 
       transition: color 300ms, background 500ms, border-color 700ms; 
       text-align: center; 
       -moz-box-sizing: border-box; 
       font-weight: 900; 
       line-height: 60px; 
       text-transform: uppercase; 
       width:50%; 
       text-align:center; 
      } 

私は十分にそれが良いdescripedを願ってより良く理解するためにいくつかのコメントを追加しました。

Answer 1

フレックスボックスを使用して、このような出力を得ることができます。

あなたが垂直にDIV1とDIV2に実証されたように、サブ要素がテキスト路Div1とサブのdivを揃える整列する方法をあなたが依存flex-direction:(row/column)を利用することができます。3.

.flex-container { 
 
    display: flex; 
 
    /*Generates a flexbox layout with default flex direction as row */ 
 
    width: 100%; 
 
    /* Not really required */ 
 
    align-items: center; 
 
    /*Aligns contents vertically */ 
 
    justify-content: center; 
 
    /*Aligns contents horizontally */ 
 
    text-align: center; 
 
    /*Aligns further text in the center */ 
 
} 
 

 
#div1, 
 
#div2 { 
 
    border: 1px solid black; 
 
    flex: 1; 
 
    margin: 0 auto; 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction:column; 
 
    align-items: center; 
 
    /*Aligns contents vertically */ 
 
    justify-content: center; 
 
    /*Aligns contents horizontally */ 
 
    text-align: center; 
 
    /*Aligns further text in the center */ 
 
} 
 

 
#div3, 
 
#div4 { 
 
    border: 1px solid black; 
 
    margin: 10px auto; 
 
    padding: 20px; 
 
    flex:1; 
 
}

<div class="flex-container"> 
 
    <div id="div1"> 
 
    Div 1 
 
    <div id="div3">Div 3</div> 
 
    </div> 
 
    <div id="div2"> 
 
    Div 2 
 
    <div id="div4">Div 4</div> 
 
    </div> 
 
</div>