圍繞多個div在一個DIV

Question

我現在的DIV看起來這樣：

這是應該的：

在我的CSS文件，我有這樣的代碼：

.noteWrapperDiv { /* the container div */ 
    width: 100%; 
    height: 50px; 
    background-color: #21252B; 
    border-width: 2px; 
    border-style: solid; 
    border-radius: 5px; 
    border-color: #9DA5B4; 
} 

.noteContentDiv { /* the first inner div */ 
    color: #9DA5B4; 
    float: left; 
} 

.noteButtonBarDiv { /* the second inner div */ 
    float: right; 

}

所以我的包裝中的兩個div應該居中。我試圖用浮動上班左右，最高：50％，但它並沒有得到中心..

Answer 1

您可以使用flexbox

div{ 
 
    height:50px; 
 
    display:flex; 
 
    align-items:center; 
 
    background:#000; 
 
    justify-content: space-between; 
 
    color:#fff; 
 
    padding:0 10px; 
 
}

<div> 
 
    Placeholder 
 
    <button>Right</button> 
 
</div>

Answer 2

更改這個CSS

.noteWrapperDiv { /* the container div */ 
    width: 100%; 
    height: 30px;/*Change This*/ 
    padding:10px 0;/*Add This*/ 
    background-color: #21252B; 
    border-width: 2px; 
    border-style: solid; 
    border-radius: 5px; 
    border-color: #9DA5B4; 
} 

Answer 3

您可以使用Flex屬性實現這一點，看看這個例子：

https://codepen.io/anon/pen/vmgjwV

<div class="wrapper"> 
    hola! 
</div> 

div.wrapper { 
    display:flex; 
    align-items:center; 
    border:2px solid red; 
    height:100px; 
}