Html

画像の横にテキストを垂直に配置しますか？



Vertically Align Text Next An Image



解決：

実際、この場合は非常に簡単です。画像に垂直方向の配置を適用します。すべてが1行になっているため、テキストではなく、実際に配置する画像です。

動作します。  
FF3でテスト済み。

 
 
これで、このタイプのレイアウトにflexboxを使用できます。
 
.box {表示：フレックス; align-items：center; }
 動作します。   
垂直方向に整列するための簡単なテクニックを次に示します。
 
 
 
1行の垂直整列：中央
 
これは簡単です。テキスト要素の行の高さをコンテナの行の高さと等しくなるように設定します。
 
動作しません。  
複数行のvertical-align：bottom
 
コンテナに対して内側のdivを絶対に配置します
 
これは下部に配置されています
複数行のvertical-align：middle
 
これは真ん中に位置しています
IEの古いバージョンをサポートする必要がある場合<= 7
 
これを全面的に正しく機能させるには、CSSを少しハックする必要があります。幸いなことに、私たちに有利に働くIEのバグがあります。設定上：コンテナの50％と上：-内側のdivで-50％、同じ結果を達成できます。 IEがサポートしていない別の機能である高度なCSSセレクターを使用して2つを組み合わせることができます。
 
 
 
#container {幅：30px;高さ：60px;位置：相対; } #wrapper> #container {display：table;位置：静的; } #container div {position：absolute;上：50％; } #container div div {position：relative;上：-50％; } #container> div {display：table-cell;垂直整列：中央;位置：静的; }
すべてで動作します！
  
可変コンテナ高さvertical-align：middle
 
このソリューションは、他のソリューションよりも少し新しいブラウザを必要とします。変換：translateYプロパティ。 （http://caniuse.com/#feat=transforms2d）
 
次の3行のCSSを要素に適用すると、親要素の高さに関係なく、要素が親内で垂直方向に中央揃えになります。
 
位置：相対;上：50％;変換：translateY（-50％）; 
あなたのフレックスコンテナにdiv：
 
div {display：flex; }
  
現在、すべてのコンテンツの配置を中央に配置する方法は2つあります。
 
  方法1：  
 
div {align-items：center; }
  デモ  
 
 
  方法2：  
 
div * {margin-top：auto; margin-bottom：auto; }
  デモ  
 
 
でさまざまな幅と高さの値を試してくださいimgとさまざまなフォントサイズの値スパンすると、常にコンテナの中央に留まることがわかります。