html - php 输出中的内联 css

Question

我有一个表格，我想添加垂直对齐到:

$output = '<style type="text/css">div.bar-container {border: 1px solid #ccc; width: 150px; margin: 2px 5px 2px 17px; padding: 3px; float: left; background: white; position:relative; border-radius: 4px;}div.bar-container div {background-color: #ff7021; height: 12px;}div.bar-container span {width:140px;text-align:center;float:left;font: normal 9px Arial,sans-serif;margin-top: 0px;}</style>
<span style="text-align: left"><h2>Control</h2></span><br />
           ' . $htmlarray["clientkeyautherror"] . '
           <table width="100%" height="450px" cellspacing="0" cellpadding="0" class="frame">
           <tr><td style="border:none">
           <table width="100%" height="450px" border="0" cellpadding="10" cellspacing="0">
           ' . $htmlarray["displaystatus"] . '
           ' . $htmlarray["bandwidthbar"] . '
           ' . $htmlarray["memorybar"] . '
           ' . $htmlarray["hddbar"] . '
           ' . $htmlarray["buttons"] . '
           ' . $htmlarray["ips"] . '
           ' . $htmlarray["graphbutton"] . '
           </table>
           </td>
           </tr>
           </table>
          ';
   return $output;
 }

我需要添加一个 vertical-align: middle;到 html 数组属性，例如 memorybar。谁能告诉我在上面的例子中我会怎么做？谢谢!

我已经试过了:

' "<div style='vertical-align:middle;'>" . ' . $htmlarray["displaystatus"] . ' . "</div>" '

却得到了美丽的死亡白页。

Answer 1

你总是可以在你想要影响的对象上放置一个类或使用:nth-child选择器。例如，使用名为“middle”的类和第一个 child :

.middle{
    vertical-align: middle;
    background: green;
}

.frame td:nth-child(2){
    background: brown;
    vertical-align: middle;
}

jsfiddle 中的示例.

另外:避免使用内联样式。这是bad practice .

EDIT1:内联样式的解释。

请考虑以下事项: 您插入的每个字符都会使您的页面变大，从而变慢。

'style='vertical-align:middle' = 29 个额外字符。 class='midtd' = 13 个图表

这是 16 个字符的差异。

.midtd{vertical-align:middle;} = 30 个字符。

如果您需要将样式应用于单个 <td>内联产生 29 个字符，类产生 43 个字符。

如果您需要将样式应用于 2 <td> s inline 总共产生 58 个字符，class 产生 56 个字符。

如果您需要将样式应用于 3 <td> s inline 总共产生 87 个字符，class 产生 69 个字符。每增加一个 td，差异就会变大。

所以如果你需要将它应用到超过1个td，class在页面大小方面优于inline。这看起来很可笑，但相信我，在你生命中的某个时刻，你会因为这个而感谢我 ;)。

此外，如果您需要将样式应用到整个列，比如说第 2 列，它会花费您 .frame td:nth-child(2){vertical-align:middle;}或 46 个字符，与表行的数量无关。

换句话说，nth-child 比大多数解决方案轻得多，但它不适用于随机单元格(假设您想要将样式应用于第 1 行的第 3 个和第 5 个单元格，但仅适用于第 2 行的第 4 个单元格，这样的顺序由服务器逻辑而不是表内的 pater 确定)，其中类方法比内联方法轻得多。您可以将同一个类应用于无限数量的元素。

这个，还有一个great deal of people如果你的页面有 1 或 2 个 float 的内联样式，谁就会少考虑你的页面。