在一个div中居中多个div

时间:2017-04-27 11:24:35

标签: javascript jquery html css

我现在的div看起来像这样:

enter image description here

这应该是这样的:

enter image description here

在我的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%,但它没有集中......

3 个答案:

答案 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;
}