Center Aligning A Floated DIV Vertically

Question

I've been working on something, and am stuck on some CSS problem. I have this:

http://sharepress.atwebpages.com/temp/

As you can see, there are two items being listed with crosses next to them. On the second item listed, you can see it is a multiline paragraph. I wanted to know how to vertically center align the 'x' vertically for multiline paragraphs like this.

Thank you all for your help and time :-)

make position relative of parent "li". make posiiton absolute of cross mark & give top:50% & margin-top: half of cross icon height. — SVS, Oct 12 '12 at 11:55
Please make your question self-contained. Now that you've fixed your problem the link will soon be gone along with any future usefulness of the question. — Sparky, Oct 14 '12 at 20:59
This will be useful for you surely :) http://stylizedweb.com/2008/02/01/vertical-align-div/ — Wazan, Oct 12 '12 at 11:54

score 1 · Accepted Answer · edited May 23 '17 at 10:24

Sounds pretty much like the same problem as this. Depends on your browser support, but display: table-cell is a pretty good way for newer browsers. More details on the answers here.

Vertical Align a DIV with dynamic height inside another DIV

if the X is constant height(eg 20px here), you could just give the container div position:relative and the x position:absolute; top: 50%; margin-top: -10px;

So in your example something like

.taskItemLi {
  position:relative;
}
.delbtn {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  right: 0;
}

Center Aligning A Floated DIV Vertically

1 Answers1