How to vertical align div?

Question

I have the following example:

<div class="container">
  <div class="left"></div>
  <div class="right">
    <span class="number">1</span>
    <span class="number">2</span>
  </div>
</div>

As you can see in the code above left div in not vertically aligned: enter image description here

But if I remove float: right then left div gets vertically aligned well: example enter image description here

Please help me how could I make vertical align left div with right float right div?

EDIT: Could you provide a solution without padding, margin, top, left etc?

You should include your CSS code in the question. Without it, the question is not real. — Jukka K. Korpela, Jan 05 '14 at 14:02

score 0 · Answer 1 · answered Jan 05 '14 at 10:52

You can't, since it is floating. You'll have to manually assign the right margin for the left div and line-height, height and margin for the right div (or use absolute/relative positioning, which I'd avoid as much as possible). Like so:

.container {
  width: 100px; 
  background: #e7e7e7;
  height: 20px;
}

.left {
  float: left;
  width: 10px; 
  height: 10px; 
  margin: 5px 0;
  background: red;
}

.right {
  float:right;
  height: 16px;
  line-height: 16px;
  margin: 2px 0;
}

Also, if you don't want to assign the height property to the container class you'll have to use clear: both after the last floating element to make sure the container will adjust to the right height.

score 0 · Answer 2 · answered Jan 05 '14 at 10:53

Try:

HTML:

<div class="left">
    <span class="bullet"></span>
</div>

CSS:

.bullet {
    width:10px;
    height:10px;
    background: red;
    display: inline-block;
    vertical-align: bottom;
}
.left {
    float:left;
}
.right {
    float:right;
}

DEMO here.

score 0 · Answer 3 · answered Jan 05 '14 at 10:53

0

Basically, you just set a line height to your right div.

So it looks like this:

.right {
   display: inline-block;
   padding: 5px;
   float: right;
   line-height: 15px;
}

http://jsbin.com/ohonaYu/9/

answered Jan 05 '14 at 10:53

D. WONG

59
7

score 0 · Answer 4 · answered Jan 05 '14 at 10:53

0

I added this to the .left class:

 position:relative;
 top:4px;

http://jsbin.com/ohonaYu/8/

answered Jan 05 '14 at 10:53

lharby

3,057
5
24
56

score 0 · Answer 5 · answered Jan 05 '14 at 10:59

0

You can use pseudo elements: use .container:before instead of left element. Fiddle here: http://jsbin.com/ohonaYu/12/edit?html,css,output

answered Jan 05 '14 at 10:59

n1kkou

3,096
2
21
32

score 0 · Answer 6 · answered Jan 05 '14 at 11:02

Use absolute and relative positioning:

.container {
  width: 100px; 
  background: #e7e7e7;
  overflow:auto;
  position: relative;
  height: 30px;  
}

.left {
  width:10px; 
  height:10px; 
  background: red;  
  position: absolute;
  left: 0;
  bottom: 10px;
}

.right {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px;
}

Example: http://jsbin.com/ohonaYu/14/edit

score 0 · Answer 7 · edited May 23 '17 at 12:32

use 'Flexible Box Layout Module' for doing that. This is Simple and Best Solution. For complete stackoverflow post and codpen Go Here.

<div class="center">
      <div>
            <h4>
                  I am at center
            </h4>
      </div>
</div>


.center {
      /*this is for styling */
      height: 100px;
      margin: 1em;
      color:#fff;
      background: #9f5bd0;

      /*you just have to use this */
      display: flex;
      justify-content:center;
      align-items:center;
}

How to vertical align div?

7 Answers7