Question

我有一个表，我想添加一个vertical-align to：

$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选择器。例如，使用名为＆＃39; middle＆＃39;的类。和第一个孩子：

.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>个内联，则总共58个字符，类产生56个字符。

如果你需要将样式应用于3 <td> s内联产生87个字符，那么类产生69个字符。而对于每一个额外的td，差异会变得更大。

因此，如果您需要将其应用于超过1 td，则就页面大小而言，类优于内联。这看起来很可笑，但相信我，你会在生命中的某个时刻感谢我这个;）。

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

换句话说，nth-child远比大多数解决方案轻，但它不适合随机单元格（让我们说，你想将样式应用于第1行的第3和第5单元格，但只在第2行的第4个单元格上，并且顺序由服务器逻辑而不是表格中的pater确定，其中类方法远比内联更轻。并且您可以将相同的类应用于无限量的元素。

这个，还有一个great deal of people，如果它有1或2个内联样式，那么你会更少地想到你的页面。

内联css里面的php输出

1 个答案: