CODEWITHSUNDEEP
javascriptjqueryhtmlcss
peterHasemann
peterHasemann

Reputation: 1590

Centering multiple divs in one div

My current div looks this:

enter image description here

And this is how it should be:

enter image description here

In my css file I have this code:

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

}

So the two divs in my wrapper should be centered. I tried to work with float left and right, top: 50%, but it didn't get centered ..

Upvotes: 0

Views: 91

Answers (3)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

You can use 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>

Upvotes: 6

manelescuer
manelescuer

Reputation: 856

You can achieve this by using flex properties, see this example:

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

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

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

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14169

Change this 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;
}

Upvotes: 0

Related Questions