与相邻单元格的特定元素对齐

Posted 2023-03-06

【中文标题】与相邻单元格的特定元素对齐

【英文标题】：Align with specific element of neighbouring cell

【发布时间】：2020-08-10 20:12:09

【问题描述】：

我不知道这是否甚至可以使用表格，所以我愿意接受使用例如的建议。弹性盒。

在包含两列的表格中，左列包含一些文本，右列包含图像和一些文本。我想将左列的文本与右列图像的中间垂直对齐。我尝试过使用绝对定位，但它们可以是可变大小的，因此它不能针对不同的屏幕尺寸正确缩放，我真的不知道如何解决这个问题。此外，它不仅仅是单元格中的图像这一事实意味着不能使用vertical-align: middle。

这是我正在处理的：

  <table>
    <tr>
      <td>I want to be aligned with the middle of the image</td>
      <td>
        <img src="https://via.placeholder.com/150" />
        <p>
          Some more text, possible over multiple lines.
        </p>
      </td>
    </tr>
  </table>

Relevant JSFiddle.

【问题讨论】：

你能把右栏的文字放在与图片不同的单元格中吗？

【参考方案1】：

不幸的是，垂直对齐不适用于块级元素，这是我们大多数人认为它不是垂直居中的全部解决方案的地方。但是，我们还有其他方法，例如“line-height”，用于使块级元素居中，我们仍然可以在适当的情况下使用 vertical-align。

你可以这样做：

.vericalAlignment
  line-height: 150px;
  vertical-align: baseline; 
  //Drop vertical-align class on your td so you don't have to overrride it here.

<table>
  <tr>
    <td class="vericalAlignment">I want to be aligned with the middle of the image</td>
    <td>
      <img src="https://via.placeholder.com/150" />
      <p>
        Some more text, possible over multiple lines.
      </p>
    </td>
  </tr>
</table>

【参考方案2】：

您可以使用显示网格进行此布局（我认为表格不可能）

.container 
    display: grid;
    grid-template-columns: 1fr 1fr;


span 
    grid-column: 1;
    align-self: center;


img 
    grid-column: 2;


p 
    grid-column: 2;

<div class="container">
    <span>I want to be aligned with the middle of the image</span>
    <img src="https://via.placeholder.com/150" />
    <p>Some more text, possible over multiple lines.</p>
    <span>I want to be aligned with the middle of the image</span>
    <img src="https://via.placeholder.com/150" />
    <p>Some more text, possible over multiple lines.</p>
</div>

【讨论】：

如果你想在保留表语义的同时应用这个解决方案，你可以这样做：jsfiddle.net/c9367aty

【参考方案3】：

我想你想要这个：

  <table>
    <tr>
      <td class="tab">I want to be aligned with the middle of the image</td>
      <td>
        <img src="https://via.placeholder.com/150" />
        <p>
          Some more text, possible over multiple lines.
        </p>
      </td>
    </tr>
  </table>

css

  table
   margin-top:55px;
  



 .tab 
   width:80px;
   padding-left:50px;
   text-align:center;
   -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
   -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
   -webkit-transform: rotate(-90.0deg);
  /* IE older versions */
   filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE newer versions */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
   transform: rotate(-90.0deg);
  

jsfiddle：https://jsfiddle.net/84t7kzx6/

或者这个

   <table>
   <tr>
     <td class="tab">I want to be aligned with the middle of the image</td>
     <td>
       <img src="https://via.placeholder.com/150" />
       <p>
         Some more text, possible over multiple lines.
       </p>
     </td>
   </tr>
 </table>

css

 .tab 


   align-items:center;
   padding-top:auto;

   padding-bottom:55px;


   

【讨论】：

距离上次看到IE6的代码已经很久......

这是为仍在使用 IE6 的人准备的 ?.BTW 这是一个错误。

【参考方案4】：

这就是其他人所说的：将图像下方的文本放在新行中。

<table>
  <tr>
    <td>
      I want to be aligned with the middle of the image
    </td>
    <td>
      <img src="https://via.placeholder.com/150" />
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <p>
        Some more text, possible over multiple lines.
      </p>
    </td>
  </tr>
</table>