flexbox：垂直居中兩個div

Question

我有一個模式在屏幕的中心有一個標題。 該標題必須包含一個標題和關閉它的按鈕。

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

所以基本上我有兩個要求：

1. 頭內的每個文本必須垂直居中。
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

Yuo可以這樣做。查看代碼中的評論，以確定你所犯的錯誤是什麼。

.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 -->