html - css divアライメント、top：50％が機能しない

Question

すっごく私はいくつかのdivアライメントを機能させることができないようです。基本的に、私はコンテナdivを持っていて、div内に左の列と右の列が必要です。基本的に、右の列は常に左の列よりも垂直方向に大きくなります。だから私は左の列を右の列の隣に垂直に中央に配置したい。これが私のCSSです：

.recipe_container{
    float:center;
    width:800px;
    position:relative;
    padding:0px;
    border:5px solid #B22222;
    margin:0px auto;
}
.recipe_container_left{
    float:left;
    width:390px;
    position:relative;
    top:50%;
    padding:4px;
    border-right:1px solid;
    margin:0px auto;
}
.recipe_container_right{
    float:right;
    width:390px;
    position:relative;
    padding:4px;
    border-right:1px solid;
    margin:0px auto;
 }

そしてhtmlはそのように囲まれています

<div class="recipe_container">
    <div class="recipe_container_left">
         recipe title and ingredients
    </div>
    <div class="recipe_container_right">
         recipe cooking instructions
    </div>
 </div>

ただし、左側の「recipe_container_left」divは、親の「recipe_container」divの内側の垂直方向の中央に配置されません。私はしばらくグーグルをしていて、何も機能しないようです。私は知っている、初心者の問題。何か助けはありますか？

このように私は結果として欲しいものです（それはブラウザウィンドウに動的にスケーリングします）：

------------------------------------------------------------
recipe_container             ============================
                             |                          |
                             |  recipe_container_right  |
 =========================== |  recipe cooking-         | 
 | recipe_container_left   | |  -instructions           |                   
 | recipe title+ingredients| |                          |
 |                         | |                          |
 =========================== |                          |
                             |                          |
                             |                          | 
                             ============================
------------------------------------------------------------
(repeat)

Answer 1

これを行う最良の方法は、javascriptを使用して左側のdivを揃えることです。または、本当にcssを使用したい場合は、試してみてください。

<div class="recipe_container_left">
   <div class="left_inner"></div>
</div>

.recipe_container_left{
   position:relative;
   top: 50%;
}
.left_inner{
   position:relative;
   top: -50%;
}

編集：このアプローチでは、一番上の位置が機能するように高さを設定する必要があります。このテーブルアプローチを試してください。固定高さを設定しなくてもうまく機能します。

<div class="recipe_container">
    <div class="recipe_container_left">
        recipe title and ingredients
     </div>

    <div class="recipe_container_right">
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
       recipe cooking instructions
   </div>
</div>

</ p>

.recipe_container{
display: table;
}
.recipe_container_left{
display: table-cell;
vertical-align: middle;
width: 300px;
}
.recipe_container_right{
width: 400px;
}

jsfiddleで実際の動作を確認する</p>

Answer 2

topステートメントは、絶対位置、固定位置、または相対位置の要素でのみ機能します。ああ、フルートはありません：中央

CSSで垂直方向に整列することは、読む必要がある少し厄介な場合があります 。divを別のdivの内側に垂直方向に中央揃えする

Answer 3

にheightプロパティを追加してみてくださいrecipe_container。