vertical-align:middle property with no defined height - html

Question

I have the following code on my site.
HTML
<div class="brand-wrap">
<a class="navbar-brand" href="<?php echo home_url(); ?>"></a>
<div class="brand-text">
<p>This is a bunch of content that may take up more than one line of text</p>
</div>
</div>
CSS
.navbar-brand {
display: inline-block;
padding: 0;
margin-top: 10px;
height: 60px;
width: 60px;
background: url('img/logo_orig.png') no-repeat center center;
background-size: auto 100%;
vertical-align: middle;
}
.brand-wrap {
position: relative;
display: inline-block;
}
.brand-text {
position: relative;
font-size: 12px;
display: inline-block;
color: #fff;
margin-left: 25px;
vertical-align: middle;
}
I am trying to vertically align navbar-brand and brand-text, but I can only get them to be next to each other. The vertical-align: middle doesn't seem to work. (* the content may take up more than one line depending on screen width)
How can I align the content vertically?

Answer 1

I don't see problem - just tried your code in here, and it seems to work as it should, or so I understand at least. Maybe be more specific about what are you trying to achieve?
Maybe you simply don't quite understand what vertical-align is supposed to do?
http://codepen.io/anon/pen/QboXov
<div class="brand-wrap">
<a class="navbar-brand" href="<?php echo home_url(); ?>"></a>
<div class="brand-text">
<p>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text<br/>This is a bunch of content that may take up more than one line of text</p>
</div>
</div>
.navbar-brand {
display: inline-block;
padding: 0;
height: 60px;
width: 60px;
background: url('img/logo_orig.png') #ccc no-repeat center center;
background-size: auto 100%;
vertical-align: middle;
}
.brand-wrap {
position: relative;
display: inline-block;
}
.brand-text {
position: relative;
font-size: 12px;
display: inline-block;
color: #ccc;
margin-left: 25px;
vertical-align: middle;
}

Answer 2

vertical-align aligns one block to another...not the content of the block itself.
The difference in the positioning is the margin-top you have on your navbar-brand.
If you remove that you can see that everything lines up.
.navbar-brand {
display: inline-block;
padding: 0;
height: 60px;
width: 60px;
background: orange;
vertical-align: middle;
}
.brand-wrap {
position: relative;
display: inline-block;
background: lightgreen;
}
.brand-text {
position: relative;
font-size: 12px;
display: inline-block;
margin-left: 25px;
vertical-align: middle;
background: lightblue;
border: 1px solid green;
padding: 0 1em;
}
<div class="brand-wrap">
<a class="navbar-brand" href="#"></a>
<div class="brand-text">
<p>This is a bunch of content that may take up more than one line of text</p>
</div>
</div>