I am trying to have an image sitting next to some text. The text needs to sit halfway vertically on the image
[IMG]
[IMG] Here is the text
[IMG]
I am getting the following, because the two cell divs are equal width, instead of matching content width:
[IMG]
[IMG] Here is the text
[IMG]
The code is preexisting. There is a table container div:
.vertical-align-container {
display: table;
table-layout: auto;
width: 100%;
}
And two table cell divs:
.vertical-align-child {
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
So no matter what I do, the table cells are equal width. How can I get the first to match content width, and the second to fill the remainder of the container?
HTML:
<div class="vertical-align-container">
<div class="vertical-align-child" style="padding-left: 0;">
<img src="path/img.png">
</div>
<div class="vertical-align-child">
<p><a href="#">Here is the text</a></p>
</div>
</div>
As you can see, I've tried a couple things, but what I've included here is table-layout, which I though was supposed to do exactly this?