javascript - Css vertical-align for spans inside div have height auto -

i have problem css.
have 1 div , 3 columns inside span, h3 , span.
wants:
div {height: auto} //auto change content in h3
h3 {height: auto} //this height change content.
span {vertical-align: middle}

<div>    <span>span 1</span>    <h3>text</h3>    <span>span 2</span> </div> 

please me style it. thanks.

div > * {    display: table-cell;    vertical-align: middle;    border: 1px solid red;  }  h3 {    font-size: 30px;    height:200px;  }

<div>    <span>span 1</span>    <h3>text <br />text</h3>    <span>span 2</span>  </div>