我有一个简单的HTML表格,其中一个单元格居中:
null
<table width=100%>
<tr>
<td align=center>
<p>Element1 (Centered)</p>
<p>Element2 (Centered)</p>
<p>Element3 (Should be on the left)</p>
</td>
</tr>
</table>
null
如何使元素1和2居中,而元素3在左边对齐?
null
.align-left {
text-align: left;
}
.align-center {
text-align: center;
}
<table width=100%>
<tr>
<td class="align-center">
<p>Element1 (Centered)</p>
<p>Element2 (Centered)</p>
<p class="align-left">Element3 (Should be on the left)</p>
</td>
</tr>
</table>
你可以这样做:
null
.center
{
text-align: center;
}
td > p:nth-child(3)
{
text-align: left;
}
<table width=100%>
<tr>
<td class="center">
<p>Element1 (Centered)</p>
<p>Element2 (Centered)</p>
<p>Element3 (Should be on the left)</p>
</td>
</tr>
</table>
简单使用text-align:left;
类
null
.left{
text-align:left;
}
<table width=100%>
<tr>
<td align=center>
<p>Element1 (Centered)</p>
<p>Element2 (Centered)</p>
<p class='left'>Element3 (Should be on the left)</p>
</td>
</tr>
</table>