0

I can't seem to get an image centered when floated to the right of text within a table th.

It looks right in the example here, so it probably has something to do with my site's css, but I can't figure out how to vertically align the text and the image.

Here's a screenshot of how it looks for me: https://www.dropbox.com/s/alejui9bchad4r0/Screen%20Shot%202020-02-06%20at%2011.37.28%20PM.png?dl=0

#sortedTable table {
  border-spacing: 0;
  width: 100%;
}

#sortedTable th {
  cursor: pointer;
  color: #fff;
  background-color: #1b1b1b;
  border: 0;
}

#sortedTable th, #sortedTable td {
  text-align: left;
  padding: 16px;
}

#sortedTable img{
    float: right;
    vertical-align: middle;
}
<table id="sortedTable" class="table-full-width">
  <tr> 
    <th onclick="sortTable(0)">Item 1 <img src="https://cigardojo.com/wp-content/uploads/2020/02/up-down-arrows.png" alt="Up Down Sorting Arrows" width="9" height="13" class="alignnone wp-image-52355" /></th>
    <th onclick="sortTable(1)">Item 2</th>
    <th onclick="sortTable(2)">Item 3</th>
  </tr>
  <tr><td>bla bla bla bla</td></tr>
</table>
Alan M
  • 616
  • 5
  • 15
jordanG
  • 49
  • 1
  • 6
  • The screenshot needs Dropbox user. Please see this post which helps you to pst your image as public one https://meta.stackexchange.com/questions/106053/how-do-i-display-image-in-a-post-on-stack-overflow – Alan M Feb 07 '20 at 07:05

1 Answers1

0

I cannot help you specifically with your floated approach, but I could show you a working flexbox alternative. It's one of the more up to date ways of creating layouts and alignments:

#sortedTable table {
  border-spacing: 0;
  width: 100%;
}

#sortedTable th {
  cursor: pointer;
  color: #fff;
  background-color: #1b1b1b;
  border: 0;
}

#sortedTable th, #sortedTable td {
  min-width: 100px;
  padding: 16px;
  text-align: left;
}

#sortedTable .cellContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
} 
<table id="sortedTable" class="table-full-width">
  <tr> 
    <th onclick="sortTable(0)">
      <div class="cellContent">
        Item 1
        <img src="https://cigardojo.com/wp-content/uploads/2020/02/up-down-arrows.png" alt="Up Down Sorting Arrows" width="9" height="13" class="alignnone wp-image-52355" />
      </div>
    </th>
    <th onclick="sortTable(1)">Item 2</th>
    <th onclick="sortTable(2)">Item 3</th>
  </tr>
  <tr><td>bla bla bla bla</td></tr>
</table>
ajobi
  • 2,996
  • 3
  • 13
  • 28