html - 在左表上对齐图像？

Question

下面的代码，当我在 HTML 编辑器上查看它并在 Web 浏览器中预览它时，两个图像都在左侧并且彼此重叠。我想在右边放一张图片，在左边放一张图片，并在中间放上文字“帮助我们改善我们为社区服务的方式”。我将如何实现这一点？

即"IMAGE1"帮助我们改进服务社区的方式 "IMAGE2"

<div class="survey-title">
  <table>
    <tbody>
      <tr align="right">
        <td style="width: 40px !important;">
          <div id="uploadImage">
            <img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAH0AawMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAwIEBQEGB//EADsQAAICAQEEBwQHBwUAAAAAAAECAAMEERIhMUEFE1FhcZGhIjJSgQYUFSNCYrEkU8HC0eHwMzRygpL/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A+4whCAQhCAQhCAQMDM7IufKufHocpUm661Tv1+Be/tPLx4A6/PqrsNNavdcONdQ2iPHkPmROUZlrZApyMfqiylk+8Da6aa66cOI7ZCsJRUK6ECIPwiJw/vulbG5U1hNfzNvPps+cDVhCEAhCEAhCEAhCLuvqoQvdYlaD8TsAPWAyEpfauBxGVWw7V3jzEdRl42Tr9Xvqt047Dg6QI9IXtj4rvWAbDoqA8CxOg9SIlUTFoShGJCjex4seJJ7ydTK30lOSuHW+IyrYlgbaZSwGgOmoAJ46cp5+rG6X6Rf9pvssB36Ipqr8z7R8NB4wNnJ6SrRuqo++vY7Kop3a955TU6MxTi44DttWMSzt2seMoYOFhdEKHyr6UsI01dgoHcAZe+1MLj13s/FsNs+emkC5CJx8rHyVLY91doHEo4OnlHQCEIQCEJUzrX9jHobS646BtNdhebfL9SIEbci261qMPQFDpZc29a+4Dm3dy59k7Tg0VWC11N1/7232m+XZ4DQRlNaUVLVSuyi8P7xkCWsrZOJRkkG6sMy+643Mvgw3j5R+phApGrMr9mrKSxOy+vaI+YI9dYDGusH7RlMF+DHXqx56lvIiXOMQ+SinZrHWOOIHAeJgFGNj45Jx6ERjxfTVm8TxMLchEOjWan4V3n0lexrH/wBR9B8Kbh58YvQKNFAA7oEcoJkMG6jZsHu2ltl18CN/rG4ebbU6U5r7YYgJcBpv7GHb2Hge48VFoixjkO2JSnWOw0cnhWDzPf2D59moehhI1ghADx03yUAmfjnrMrJyDybqU8BvPqfSX23AmZuCf2Ko/GWc/wDZiYFwToMgpkhAnIW2pSm3Y2g5d8Tl5aYwVQNu59yVjif7RVNTluuyW27j5J3CBJjZf75NdfwDifEzmgRdlQABwAk2aIdoEXaKZoO0SzQOXWsqfdgGwkKgPNjw+XP5TY6Ow0xMdUGpY72Y8WJ4k98zMevbysPUfHZ5AD+YzegEIQgRf3D4TKwP9ljjsTTy3TWbgZk4XspZXzrtdfM7Q9GEC4kR0jnpg1LqNu6w6VVjixncvLpwcSzJyDoiDXvPYB3zI6IrtzLm6UzRpZYPuU/dpy/z+sDQwcV0LZGU23k2e8fh7hLTNIlotngddpXdp13iLHgRd5XeydseV3aBsYz+1gW9jPUe7Ua/yzanmMB+srfFL7BbRqnP4XB1U+Ym/hZIyKQxGw4OzZWeKMOIP+bxvgWIQhAJlOOp6Tdfw3ptj/ku4+hHlNWZX0jovt6Otswjs5dSlqW79CP46QPN52T9v9P/AFGs7WBgNraeVlnZ+o+R7Z6NSFUAcBMD6L9HfZfRdVTENa46x3G/aLb+PhoPlNragNLxbNIlotmgcdoixpJzEtAW7axRMYYthA4CQdQdJpY+cxcW7SpkAAEt7toHJu/sPLvmUzaRmInW3AMdEX2nbsA3kwPW4eT9ZrLFCjKdllJB0OmvHnxliUeh0ZcTrHBVrWNhX4deA+Q0EvQCcYagg852EDz9lRxchsfT2Tq9J7uJX5cR3a9k4G3cZr9IYgyqdASti+0jjipHCYo2nLgrs3J/q1jl+Ydqn0gTJkW3wGhhugQIi2WWAjt7tZM4a347B0gU3XdEvLr1NpuGsrNTYx0VGJ8IFNjv0E1sLDPsYpGr2gPf+VOS/M+g75ynEGEEuvXrL23U0c2PaewDmZudG4hx6y1jbd9h2rX+I/07O6BbUBVAHATsIQCEIQCUs7AXIK21u1WQnuWJxEuwgYbpmo2l2Bj5H563NeviN8Pq/SGQNlKKMReba7beu79ZuQgY69AYr78prMhu2xtfTlJN9Hujxvpq6luTVHZPmJrQgYZwM/FcGi5MhB+C4b//AEP46xgfpNzs14eNQfjZy+ny0E2IQKOH0eKbGvvsa7Ib3rG/Qdg7pehCAQhCB//Z"
              alt="Logo1" title="Logo1">
          </div>
        </td>
      </tr>


      <tr align="right">
        <td style="width: 40px !important;">
          <div id="uploadImage">
            <span style="float:left;"></span>
            <img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,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"
              alt="Logo2" title="Logo2">
            <td>

              <div type="text" id="survey-name" class="survey-name survey-headers survey-name-image" placeholder="Untitled Survey" disabled="true" title="Help us improve how we serve the best community" aria-label="Help us improve how we serve the community">Help us improve how we serve the community</div>
            </td>
      </tr>
    </tbody>
  </table>
  </div>

Answer 1

您必须在单个 tr 中使用 3 个 tds。就像这个例子:

<div class="survey-title">
  <table>
    <tbody>
      <tr>
        <td>
          <div id="uploadImage">
            <img id="imgPreview" src="data:image/jpeg;base64,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"
              alt="Logo1" title="Logo1">
          </div>
        </td>
    

<td>
              <div type="text" id="survey-name" class="survey-name survey-headers survey-name-image" placeholder="Untitled Survey" disabled="true" title="Help us improve how we serve the best community" aria-label="Help us improve how we serve the community">Help us improve how we serve the community</div>
            </td>
     
        <td>
          <div id="uploadImage">
            <img style="display: inline;" id="imgPreview" src="data:image/jpeg;base64,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"
              alt="Logo2" title="Logo2">
            <td>

      </tr>
    </tbody>
  </table>
  </div>