フレックスボックス：2つのdivを垂直に中心にします

Question

私は、画面の中央にヘッダーがあるモーダルを持っています。 そのヘッダーには、タイトルとそれを閉じるボタンが含まれている必要があります。ヘッダー内のすべてのテキストを垂直方向に中央揃えされている必要があり

1. ：

   -------------------------------- 
   |      (close)| 
   | Text      | 
   |        | 
   -------------------------------- 
   

   だから基本的に私は2つの要件があります。

2. 「（閉じる）」をコーナーのヘッダーの近くに配置できるようにします。

今私はすべて垂直方向の中央が、私はミリアンペアパイルのヘッダ内に置くの要素を持っている：

-------------------------------- 
|        | 
| Text      | 
| (close)      | 
|        | 
-------------------------------- 

.modal-payment__wrapper {   // <- this is the whole box 
 
    max-width: 50%; 
 
    width: 500px; 
 
    height: 200px; 
 
    background: white; 
 
    font-family: 'Lato', 'sans-serif'; 
 

 
} 
 

 
.modal__header {     // <- this is the header 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding-left: 20px; 
 
} 
 

 
.modal__header__title {   // <- this is "text" 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 1.7em; 
 
    padding: 10px; 
 
    flex-grow: 0; 
 
    flex-srhink: 0; 
 
    flex-basis: auto; 
 
    align-self: auto; 
 
}

<div class="modal-payment__background"> 
 
    <div class="modal-payment__wrapper"> 
 
     <div class="modal__header"> 
 
      <div> 
 
       Text 
 
      </div> 
 
      <div class="modal__header__x" 
 
       @click="closeModal"> 
 
       x 
 
      </div> 
 
     </div> 
 
     <div class="modal__body">

私は何をしないのですか？

Answer 1

が設けられたコードでかなりの数の誤りがあったが、私は、これは何が必要だと思います。 @clickはここでは認識されないので、削除する必要がありました。

.modal-payment__wrapper { 
 
    max-width: 50%; 
 
    width: 500px; 
 
    height: 200px; 
 
    background: white; 
 
    font-family: 'Lato', 'sans-serif'; 
 
} 
 

 
.modal__header { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding-left: 20px; 
 
    position: relative; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.modal__header__title { 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 1.7em; 
 
} 
 

 
.modal__header__x { 
 
    position: absolute; 
 
    right: .5em; 
 
    top: 0; 
 
}

<div class="modal-payment__background"> 
 
    <div class="modal-payment__wrapper"> 
 
    <div class="modal__header"> 
 
     <div class="modal__header__title"> 
 
     Text 
 
     </div> 
 
     <div class="modal__header__x"> 
 
     x 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

こんなことができます。間違いをしている場所を残すために、コードのコメントを参照してください。

.modal-payment__wrapper {   
 
    max-width: 50%; 
 
    width: 500px; 
 
    height: 200px; 
 
    background: white; 
 
    font-family: 'Lato', 'sans-serif'; 
 

 
} 
 

 
.modal__header {   
 
    
 
    display: flex; // You need this 
 
    justify-content: center; 
 
    flex-direction: row; // You need this 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: black; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding-left: 20px; 
 
    
 
} 
 

 
// You will need below css 
 
.modal__header > div{ 
 
    justify-content: space-around; 
 
    width: 50%; 
 
    align-self: center; 
 
    
 
} 
 

 
.modal__header__title {   // <- this is "text" 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 1.7em; 
 
    padding: 10px; 
 
    flex-grow: 0; 
 
    flex-shrink: 0; // Spelling mistake 
 
    flex-basis: auto; 
 
    align-self: auto; 
 
} 
 

 
.modal__header__x{ 
 
    color: #fff; // You need this 
 
    
 
}

<div class="modal-payment__background"> 
 
    <div class="modal-payment__wrapper"> 
 
     <div class="modal__header"> 
 
      <div class="modal__header__title"> 
 
       Text 
 
      </div> 
 
      <div class="modal__header__x" 
 
       @click="closeModal"> 
 
       x 
 
      </div> 
 
     </div> 
 
     <div class="modal__body"> 
 
      BODY 
 
     </div> <!-- Missing /div in your code --> 
 
    </div> <!-- Missing /div in your code --> 
 
</div> <!-- Missing /div in your code -->