CSS - テキストとアイコンの配置

Question

私はサイトを構築していて、デザインを含むPSDファイルを受け取っていますが、ある特定のセクションでは苦労しています。

私はそのかなり経験豊富なフロントエンドの開発者には明らかではなく、私が使用してきた山車確信している - これはデザインがどのように見えるべきかである - 私がでてるところ

をそして、これはあります表示し、苦労しています。ここで私はこれを取得するために使用したコードだ -

HTML

<section id="home"> 

     <a href="agency.html">Are you an agency?</a> 
     <a href="business.html">Or a business?</a> 
     <div class="container showreel"> 
      <div class="seemore"> 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
       <p>SEE MORE</p> 
      </div> 
      <div class="seeour"> 
       <p>SEE OUR SHOWREEL</p> 
       <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
      </div> 
     </div> 
    </section> 

CSS

section#home { 

    height: 480px; 
    max-width: 100%; 
    background: url(../images/homepagemain.jpg) center center no-repeat; 
    background-size: 960px; 
    background-position: center; 
    overflow: hidden; 
    margin-top: 75px; 
    position: relative; 
} 

.showreel { 
    height: 50px; 
    width: 960px; 
    background-color: black; 
    position: absolute; 
    bottom: 0; 
} 

.showreel p { 
    display: inline-block; 
    font-size: 15px; 
    font-weight: normal; 


    color: #ffffff; 
} 

.showreel i { 
    display: inline-block; 
    margin-right: 30px; 
    color: #ffffff; 


} 

.seemore { 
    float: left; 
} 

.seeour { 
    float: right; 
} 

アイコンがデザインと全く同じではありませんが、私はできます後で変更/修正する。私が正しいものにするために必要なポジショニングはもっと重要です。任意の援助、感謝します。

更新 - これは現在の状態です。

Answer 1

あなたは両親と左/右のセクションflexを作り、はるかにエッジに要素を分離するために、親にjustify-content: space-betweenを使用し、その後、垂直方向にそれらを中心にalign-items: centerを使用することができます。次に、左の要素にiとpを並べ替えて、アイコンに一意のmargin-leftとmargin-rightを適用して、テキストと区別します。

section#home { 
 
    height: 480px; 
 
    max-width: 100%; 
 
    background: url(../images/homepagemain.jpg) center center no-repeat; 
 
    background-size: 960px; 
 
    background-position: center; 
 
    overflow: hidden; 
 
    margin-top: 75px; 
 
    position: relative; 
 
} 
 

 
.showreel { 
 
    height: 50px; 
 
    width: 960px; 
 
    background-color: black; 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 0 30px; 
 
    justify-content: space-between; 
 
} 
 

 
.showreel, .showreel > div { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.showreel p { 
 
    font-size: 15px; 
 
    font-weight: normal; 
 
    margin: 0; 
 
    color: #ffffff; 
 
} 
 

 
.showreel i { 
 
    color: #ffffff; 
 
} 
 

 
.seemore i { 
 
    margin-right: 30px; 
 
} 
 

 
.seeour i { 
 
    margin-left: 30px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<section id="home"> 
 
     <a href="agency.html">Are you an agency?</a> 
 
     <a href="business.html">Or a business?</a> 
 
     <div class="container showreel"> 
 
      <div class="seemore"> 
 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
 
       <p>SEE MORE</p> 
 
      </div> 
 
      <div class="seeour"> 
 
       <p>SEE OUR SHOWREEL</p> 
 
       <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
 
      </div> 
 
     </div> 
 
    </section>

Answer 2

https://codepen.io/toastEater/pen/rwYRMG

HTML

<div class="container"> 
    <div class="bottom-bar"> 
    <div class="showreel"> 
      <div class="seemore"> 
       <p>SEE MORE</p> 
       <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i> 
      </div> 
      <div class="seeour">  
      <p>SEE OUR SHOWREEL</p> 
      <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i> 
      </div> 
     </div> 
    </div> 

</div> 

CSS

.container{ 
     width: 100%; 
     height: 420px; 
     background: url('http://i.imgur.com/5tj6S7Or.jpg') no-repeat top center; 
     position: relative; 
    } 
    .bottom-bar{ 
     position: absolute; 
     bottom: 0; 
     width: 100%; 
     background: rgba(0,0,0,0.7); 
     height: 50px; 
    } 
    .showreel { 
     width: 960px; 
     margin: 0 auto; 
     text-align: left; 
     font-size: 15px; 
     color: #ffffff; 
    } 

    .seemore, 
    .seeour{ 
     display: inline-block; 
    } 

    .seeour { 
     float: right; 
    }