Before we start:
Please don't close this as a duplicate of another question. I just searched here on Stackoverflow without finding that exact case. The closest is I believe http://stackoverflow.com/questions/5219324/vertical-align-img-and-text-inside-p\[code\]vertical-align: middle;\[/code\] just bumps the text a tiny bit away from the top, but not really in the middle.
Setting the span \[code\]position: absolute;\[/code\] and then applying \[code\]top: 50%;\[/code\] and then \[code\]margin-top: -x%;\[/code\] won't work because the height of the span is not known as it is dynamic content.
Although the linked question states that this is bad practice, I also tried the \[code\]display: table-cell\[/code\] approach without any result. Please help me.
Please don't close this as a duplicate of another question. I just searched here on Stackoverflow without finding that exact case. The closest is I believe http://stackoverflow.com/questions/5219324/vertical-align-img-and-text-inside-p\[code\]vertical-align: middle;\[/code\] just bumps the text a tiny bit away from the top, but not really in the middle.
Setting the span \[code\]position: absolute;\[/code\] and then applying \[code\]top: 50%;\[/code\] and then \[code\]margin-top: -x%;\[/code\] won't work because the height of the span is not known as it is dynamic content.
Although the linked question states that this is bad practice, I also tried the \[code\]display: table-cell\[/code\] approach without any result. Please help me.