提问者:小点点

如何只将HTML表中的一些元素居中?


我有一个简单的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在左边对齐?


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