I've been searching for a solution to this issue, but have not been successful yet.
My goal is to vertically center the h1 and span elements within the description_content list item.
However, there's a complication. The span element only appears if the Phone variable is not empty. So I need to find a way to vertically center both Seller and Phone together, or just Seller alone if no Phone is present:
<li id="description_content">
<h1>Seller</h1>
<br> <br>
<span>Phone: </span> <br>
</li>
Below is my current CSS:
#description_content{
height:163px !important;
font-size:16px;
}
#description_content h1{
font-size:16px;
font-weight:normal;
padding:14px 10px 20px 7px;
}
#description_content span{
padding:0 10px 0 7px;
float:left;
font-weight:normal !important;
}
I have tried various methods, including using the code below, which centers the content but affects the subsequent list items as well:
display:table-cell!important;
vertical-align:middle!important;Here is a link to a fiddle demonstrating the issue: http://jsfiddle.net/pazzesco/vykqv19j/
Any suggestions on how I can achieve the desired vertical alignment?