右揃えのdivにテキストボックスを垂直に配置します

Question

私が学んだ解決策の1つは、親div要素のdisplayをtable-cellに設定し、vertical-alignプロパティを使用することでした。

私のケースでは、親divを右に浮かべる必要がありますが、テーブルセルトリックが壊れてしまい、すべてが今は機能しません。

私の質問は簡単です：なぜこれが起こっているのですか、さらに重要なのは、どのようにして私が望む効果を達成できるのでしょうか？

div { 
 
    /* float: right; uncomment this will make this not working */ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    height: 60px; 
 
    border: 1px solid red; 
 
}

<div> 
 
    <input> 
 
</div>

Corresponding JSFiddle

Answer 1

CSS3はフレックスボックスを提供します。フレックスボックスの

body { 
 
    display: flex;    /* create flex container */ 
 
    justify-content: flex-end; /* align child to right edge */ 
 
} 
 

 
div { 
 
    display: flex;    /* create nested flex container */ 
 
    align-items: center;  /* center child vertically */ 
 
    height: 60px; 
 
    border: 1px solid red; 
 
}

<div> 
 
    <input> 
 
</div>

---

利点：：必要なのはこれです

1. 最小限のコード。非常に効率的な
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. それは、フレキシボックスを備えたモダンな（CSS3）技術である彼らは、建物のレイアウトのために意図されていませんでしたので、限られたレイアウト能力を提供山車とテーブルとは異なり、
6. 応答です幅広いオプションがあります。

---

フレキシボックスの訪問についての詳細を学ぶために：

• Methods for Aligning Flex Items
• Using CSS flexible boxes〜MDN
• A Complete Guide to Flexbox〜CSS-トリック
• What the Flexbox?!〜YouTubeのビデオチュートリアル

---

ブラウザのサポート：フレキシボックスは、すべての主要なブラウザ、except IE 8 & 9でサポートされてい

。 Safari 8やIE10などの最近のブラウザのバージョンには、vendor prefixesが必要です。必要なすべての接頭辞をすばやく追加するには、Autoprefixerを使用してください。詳細はthis answerを参照してください。

Answer 2

浮かぶようにdivのセットですべてをラップ：右。

Answer 3

あなたのフィドルを少し微調整して更新しました。これがあなたのために働くことを望みます。 http://jsfiddle.net/53ALd/3780/

htmlのを確認してください：

<div > 
<input class="form-control" id="txtWOFastNavigation"> 
</div> 

CSS：

div { 
    float: right; 
    height: 160px; 
    border: 1px solid #000; 
    position: relative; 
    background: red; 
    width: 104px; 
} 

div .form-control{ 
    width: 100px; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}