flexbox：垂直居中两个div

我有一个模式在屏幕的中心有一个标题。该标题必须包含一个标题和关闭它的按钮。flexbox：垂直居中两个div

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

所以基本上我有两个要求：

头内的每个文本必须垂直居中。
能够将“（关闭）”靠近角落的标题。

现在我所拥有的一切垂直居中，但要素我把水箱内的马桩：

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

我缺少什么？

来源

2017-07-12 ste

试试这个http://jsfiddle.net/Lt8bct5x/1/ – Super

'柔性direction'应该是'row'if下一步要相互对齐的那些元素。然后使用'align-items'垂直居中。 – UncaughtTypeError

有相当所提供的代码的一些错误，但我认为这是你所需要的。我不得不删除@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>

来源

2017-07-12 13:03:47 Gerard

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

来源

2017-07-12 13:02:24

flexbox：垂直居中两个div

回答

相关问题