Align only one span center

Question

Basically I have the following:

<td>
<span id="sp1">foo</span>
<span id="sp12">foo</span>
</td>

How can I align sp1 on the left and sp2 on the center?

I have tried using text-align and the position attributes but none worked.

This didn't work, for instance:

<td style="text-align:left">
<span id="sp1">foo</span>
<span style="text-align:center" align="center" id="sp12">foo</span>
</td>

@SMAKSS not sure it is a wise idea to reset display for a td to flex — G-Cyrillus, May 29 '20 at 16:30
@G-Cyrillus Yea, `td` won't work with flexbox at all, but they are based on something common. — SMAKSS, May 29 '20 at 16:31
`span` is an inline element. it doesn't support text alignment. It gets its alignment from the closest block or inline-block element. You could use `display: inline-block; width: n` where n is a static width. Or you could use flex-box on a wrapping element. Or use floats. — prodigitalson, May 29 '20 at 16:44

score 0 · Answer 1 · answered May 29 '20 at 16:31

Aside text-align you could use float:

table {
  width: 100%;
  background: linear-gradient(to left, white 50%, gray 50%);/* show center */
}

td {
  text-align: center;
}

#sp1 {
  float: left;
}

<table>
  <tr>
    <td>
      <span id="sp1">foo</span>
      <span id="sp12">foo</span>
    </td>
  </tr>
</table>

To set #sp2 right on the middle, transform can finalize it , but it can then overflow the floatting element:

table {
  width: 100%;
  background: linear-gradient(to left, white 50%, gray 50%);/* show center */
}

td {
  text-align: center;
}

#sp1 {
  float: left;
}
#sp12 {
display:inline-block;
transform:translatex(-50%);
}

<table>
  <tr>
    <td>
      <span id="sp1">foo</span>
      <span id="sp12">foo</span>
    </td>
  </tr>
</table>

Align only one span center

1 Answers1