テキストを中央のテキストの上にちょうどpxの位置に置くにはどうすればいいですか？

Question

私は以下のようなHTML構造を持っています。ここで、要約を中央（縦方向と横方向）に表示します。また、「just-in-tags」は、要約のちょうど20px（余白）になるようにします。

<div class="article-right aligner"> 
    <div class="just-in-tags"> 
     <span class="article-label tags tags--primary">Latest Best of the Web</span> 
    </div> 

    <div class="summary"> 
     <h2 class="trending-header-text"> 
     <a href="google.com">Hello World Hello World Hello World</a> 
     </h2> 
    </div> 
</div> 

私はこのcodepenに示すように実行しようとしました：

http://codepen.io/hellouniverse/pen/LbJoYY

私がしようとしているCSSは次のとおりです。

%aligner { 
    align-items: center; 
    display: flex; 
    justify-content: center; 
} 

.tags { 
    text-align: center; 
    margin-bottm: 20px; 
} 

.article-right { 
    width: 860px; 
    height: 320px; 
    background-color: grey; 
    @extend %aligner; 
    flex-direction: column; 
} 

はしかし、すべてが私のために中央に配置されます。 要約のテキストを中央に配置し、「最新のベスト・オブ・ザ・ウエブ」を要約のテキストよりも正確に20px上にして、要約テキストを中央に垂直に維持したい。

私は立ち往生しています。どのようにこの問題を解決するための任意のアイデア？このコードの代わりに

Answer 1

使用：

.aligner { 
 
\t align-items: center; 
 
\t display: flex; 
 
\t justify-content: center; 
 
} 
 

 
.summary { 
 
\t text-align: center; 
 
} 
 

 
.tags { \t 
 
\t margin-bottm: 20px; 
 
} 
 

 
.article-right { 
 
\t width: 860px; 
 
\t height: 320px; 
 
\t background-color: grey; 
 
\t @extend %aligner; 
 
\t flex-direction: column; 
 
}

<div class="article-right aligner"> 
 
\t <div class="summary"> 
 
\t \t <span class="article-label tags tags--primary">Latest Best of the Web</span> 
 
\t \t <h2 class="trending-header-text"> 
 
     <a href="google.com">Hello World Hello World Hello World</a> 
 
     </h2> 
 
\t </div> 
 
</div>

はところで：あなたはその codepenのタイプミスがありました。アライナーは .の代わりに %でした。

Answer 2

下記のリンクをご覧ください。 How to center an element horizontally and vertically?

Answer 3

あなたは、テキスト整列のコメントを外すことにより、中央のウェブテキストの最新情報を得ることができます：私はあなたの質問がここで回答されていると信じセンターを.tagsクラスに（あなたはそれをしたい場合は...）

.article-right { 
 
    width: 860px; 
 
    height: 320px; 
 
    background-color: grey; 
 
\t \t position:relative; 
 
} 
 
.summary{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t width:100%; 
 
\t position:absolute; 
 
\t bottom:50%; 
 
} 
 
.tags { 
 
    margin:0; 
 
    padding:0; 
 
    /*text-align: center;*/ 
 
    margin-bottom: 20px; 
 
} 
 
.trending-header-text{ 
 
\t text-align:center; 
 
\t margin:0; 
 
\t padding:0; 
 
    font:size:30px; 
 
    margin-bottom:-15px; 
 
}

<div class="article-right aligner"> 
 
     <div class="summary"> 
 
      <p class="article-label tags tags--primary">Latest Best of the Web</p> 
 
      <h2 class="trending-header-text"> 
 
      <a href="google.com" >Hello World Hello World Hello World</a> 
 
      </h2> 
 
     </div> 
 
    </div>

Answer 4

.aligner { 
 
\t align-items: center; 
 
\t display: flex; 
 
\t justify-content: center; 
 
} 
 

 
.summary { 
 
\t text-align:center; 
 
} 
 

 
.tags { 
 
\t margin-bottm: 20px; 
 
} 
 

 
.article-right { 
 
\t width: 860px; 
 
\t height: 320px; 
 
\t background-color: grey; 
 
\t @extend .aligner; 
 
\t flex-direction: column; 
 
\t text-align: center; 
 
}