CODEWITHSUNDEEP
csscss-floatcss-tables
Ian Davis
Ian Davis

Reputation: 19423

How to make a floated div vertically aligned relative to height of its container

I'm trying to vertically align a floated div that's inside a parent div. Since the parent div can contain a varying amount of content, I'd like it to be vertically aligned vs. having to set a fixed margin-top on the floated div. Live example here, where the right arrow you see is in the upper right corner of the gray div but I want it to be vertically centered http://jsbin.com/oriqow/1/

CSS:

.item { vertical-align:middle; border: 1px solid #999; padding: 10px; background: #e6e6e6; border-radius: 4px; }
.item > div:not(.arrow) { margin-bottom:10px; }
.arrow { float: right; }

HTML:

<div class="item">
  <div class="arrow">▶</div>
  <div>Title</div>
  <div>Sub title</div>
  <div>Another potential element here</div>
  <div>And another</div>
</div>

Upvotes: 3

Views: 1616

Answers (2)

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66981

http://jsfiddle.net/v8f8Q/

.item { position:relative; vertical-align:middle; border: 1px solid #999; padding: 10px; background: #e6e6e6; border-radius: 4px; }
.item > div:not(.arrow) { margin-bottom:10px; }
.arrow { position:absolute; top:45%; right:2%; }​

Upvotes: 0

Renaud C.
Renaud C.

Reputation: 535

Add this style to your .arrow class:

position: absolute;
right: 0;
top: 50%;
margin-top: -18px;

(and remove the float:right; )

And make this to your .item class:

position: relative;

Upvotes: 3

Related Questions