我现在的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%,但它没有集中......
答案 0 :(得分:6)
您可以使用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>
答案 1 :(得分:0)
更改此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;
}
答案 2 :(得分:0)
您可以使用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;
}