Trouble vertically centering div inside parent div with unset height

Question

edit: I am aware this question appears to be a duplicate of previous questions, but i have tried all the answers to the older questions I found and none of them worked in my case.

I have a widget that displays a list of links with an image next to each link. The image is dynamically generated based on the class of the link, so every image is different, and as such has a different height. The structure is such that I have an outer div called wrapper, and inside each wrapper is a div with the image and a div with the link, floated left so that the link appears next to the image.

div alignment

I've added a colored border to each div so that you can see them easily.

I need the link div (the one with the blue border) to be vertically centered, so that it's centered relative to the image rather than aligned with the top. Here is my code:

<li class="@item.Category"><div class="wrapper"><div class="imgBox"><img src="@imgSrc"/></div><div class="linkBox"><a href="@item.Link.NavigateUrl"> @item.Link.Text</a> </div></div></li>

and the css:

}
.wrapper {
    width: 100%;
    display: inline-block;
    border: 1px solid green;
}
.imgBox {
    width: 55px;
    float: left;
    border: 1px solid red;
}
.imgBox > img {
    display: block;
    margin: 0 auto;
}
.linkBox {
    float: left;
    border: 1px solid blue;
    display: block;
    margin-bottom: auto;
}

I have tried numerous methods to get linkBox vertically centered, but I can't get anything to work. Because wrapper does not have a set height, setting the height of linkBox to 100% doesn't work. I've also tried margin-top:50% but that seems to set it to 50% of the outermost div (which is 400px high), again I think because wrapper does not have a set height.

I also tried this solution:

.wrapper {
    display: table-cell;
    vertical-align: middle;
}

.linkBox {
    margin-left: auto;
    margin-right: auto; 
    width: 100%;
}

but that didn't work either.

Can you provide a demo of how you used `display: table-cell;` solution? — Mr. Alien, Jul 30 '14 at 16:52
Yes but you must be doing it in a wrong way, the thing what you tried should work — Mr. Alien, Jul 30 '14 at 17:13
you can achieve this using inline-block, see this http://jsfiddle.net/gaurav5430/RgLdK/1/ — gaurav5430, Jul 30 '14 at 18:11
@Mr.Alien, the difference between my code and the code in that solution is that I do not have a fixed height for wrapper — Erica Stockwell-Alpert, Jul 30 '14 at 19:44
@user3784238 the answer I linked also provides a solution for dynamic height — Mr. Alien, Jul 31 '14 at 05:44

Trouble vertically centering div inside parent div with unset height

0 Answers0