How to make two div content vertical center? - html

Question

I want to make two div content center "16) test". here please don't remove table. So. Please let me know. How i can do in my case using css ?
Result like . No need line but content center
<div style="width:946px;">
<div style="display: inline-block;">
<div style="float: left; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="float: left; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:15.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 1

<div style="width:946px;">
<div style="display: table;">
<div style="display:table-cell; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="display:table-cell; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;position:relative;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="position:absolute;">
<tbody>
<tr>
<td>
<span style="font-size:15.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Answer 2

Vertical alignment of text can be achieved easily by tables. Just make your floating divs displayed as table cell as in the code snippet below.
This code has a lot of inline styles and unused HTML. If needed you can use the code at the bottom to achieve the same result in very less code.
<div style="width:946px;">
<div style="display: table;">
<div style="display:table-cell; padding-right: 15px; padding-left: 30px; vertical-align: middle;text-align:center; " class="no">
<strong>
<span style="font-size:11.0pt">
16)
</span>
</strong>
</div>
<div style="display:table-cell; width: 765px; word-wrap: break-word; vertical-align: middle;text-align:justify;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<span style="font-size:30.0pt">
<span style="line-height:115%">
<span>Test</span>
</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--Simpler approach with inline styles-->
<table>
<tr>
<td style="font-size:11pt; padding: 0 15px 0 30px;"><b>16)</b></td>
<td style="font-size:30.0pt; text-align: left; width: 765px;">Test</td>
</tr>
</table>