如何使两个div内容垂直居中？
[英]How to make two div content vertical center?
问题描述
I want to make two div content center "16) test". 
我要对两个div内容中心进行“ 16）测试”。 here please don't remove table. 在这里，请不要删除桌子。 So. 所以。 Please let me know. 请告诉我。 How i can do in my case using css ? 在使用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>
2 个解决方案
解决方案1
1 2017-07-10 17:07:27
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. 只需将您的浮动div显示为表格单元格即可，如下面的代码段所示。
This code has a lot of inline styles and unused HTML. 此代码具有许多内联样式和未使用的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>
解决方案2
1 已采纳 2017-07-11 08:59:12
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.