2016-11-06 3 views
1

私のスケッチと同様の効果を得たいと思っています。フレックスボックスアイテムを合わせる

https://postimg.org/image/o03qu4tpp/

人は常にヘッダの右下隅に配置しなければなりません。カルーセルはセンター/センター左の位置(ヘッダーの高さの50%)にある必要があります。

新しいクラス(pad4)をヘッダコンテナに追加し、flexboxを使用しました。

display: flex; 

justify-content:flex-end; align-items:flex-end;

男は左下隅にあり、テキストは右上隅にあります。私は今それを修正する方法を知らない。マージンやパディングを使用すると何も起こりません。

サイト:http://jarmor.webd.pl/designs/kovta/agency2a.html

+2

質問を求めるヘルプは、問題**の中で、** [** Stack Snippet **](https://blog.stackoverflow)の**にそれを再現するのに必要な最短コードを含める必要があります。 com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /)あなたは[**サンプルまたはサイトへのリンク**]を提供していますが(http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-リンクが無効になる場合、あなたの質問は同じ問題を持つ他の将来のSOユーザには価値がないでしょう。 –

答えて

1

display: flexは、子供たちがフレックスの要素として考慮されるように、親要素に適用する必要があります。したがって、<header>要素にdisplay: flex; align-items: flex-end;を適用する必要があります。次に、スライダーコンテナ(あなたの場合はdiv.container-fluid.pad4)にalign-self: centerを適用します。結果は次のようになります:The result

関連する問題