如何制作两个div内容垂直中心？

Question

我想制作两个div内容中心＆＃34; 16）test＆＃34;。请不要删除表格。所以。请告诉我。在我的情况下，我如何使用CSS？

结果如。不需要行而是内容中心

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

通过表格可以轻松实现文本的垂直对齐。只需将浮动div显示为表格单元格，如下面的代码段所示。

此代码包含许多内联样式和未使用的HTML。如果需要，您可以使用底部的代码以非常少的代码获得相同的结果。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

<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>