Выровнять с указанным c элементом соседней ячейки - PullRequest
Новая
       44

Выровнять с указанным c элементом соседней ячейки

1 голос
/ 27 апреля 2020

Я не знаю, возможно ли это даже с использованием таблиц, поэтому я открыт для предложений, например, с использованием flexbox.

В двухколоночной таблице в левом столбце есть текст, в правых столбцах имеет изображение и текст. Я хочу выровнять текст в левом столбце по вертикали по центру изображения в правом столбце. Я пытался использовать абсолютное позиционирование, но они могут иметь переменный размер, чтобы он не масштабировался правильно для разных размеров экрана, и я действительно не знаю, как еще подойти к проблеме. Кроме того, тот факт, что это не просто изображение в ячейке, означает, что 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>

Соответствующий JSFiddle .

Ответы [ 4 ]

0 голосов
/ 28 апреля 2020

Это то, что говорили другие люди: поместите текст под изображением в новую строку. 

<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>
0 голосов
/ 27 апреля 2020

Вы можете использовать этот макет, используя сетку дисплея (я не думаю, что это возможно с таблицей) 

.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>
0 голосов
/ 27 апреля 2020

Я думаю, вы хотите это: 

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


   }
0 голосов
/ 27 апреля 2020

К сожалению, вертикальное выравнивание не применяется к элементам блочного уровня, и большинство из нас понимают, что это не лучшее решение для вертикального центрирования. Тем не менее, у нас есть другие методы, такие как «line-height» для центрирования элементов уровня блока, и мы все еще можем использовать вертикальное выравнивание, где это необходимо.

Вы можете go с этим: 

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