CODEWITHSUNDEEP
csshtml
Erik
Erik

Reputation: 14770

How to vertical align div?

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?

Upvotes: 1

Views: 130

Answers (7)

Rohit Bind
Rohit Bind

Reputation: 113

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

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94489

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

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

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

Upvotes: 0

lharby
lharby

Reputation: 3265

I added this to the .left class:

 position:relative;
 top:4px;

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

Upvotes: 0

D. WONG
D. WONG

Reputation: 59

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/

Upvotes: 0

codingrose
codingrose

Reputation: 15709

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.

Upvotes: 0

Tim
Tim

Reputation: 5691

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.

Upvotes: 0

Related Questions