Question

以下是表格中的 HTML ，但我只想要表格中的每一行，图片位于左中间，而我的3段位于中间行，图像必须与文本对齐。在目前的代码中，图像位于左侧，但位于＆＃34; Nom＆＃34;之间的行中。和＆＃34;键入＆＃34;所以它没有对齐

＆＃13;

<div class="my-container">
      <div class="constrained">
          <table class="table table-condensed table-hover" infinite-scroll="loadMore()" infinite-scroll-container="'.constrained'">
            <tbody>
              <tr ng-repeat="item in list | limitTo: packetIndex + packetSize" ng-click="preview(item[0])" ng-class="{active: item[0].selected}">
                <td>
                  <p class="file-name" title="Cliquez pour visualiser le fichier"></p>
                  <i class="fa fa-cloud-download-alt dl-file" style="margin-right:5px" title="Télécharger le fichier" ng-if="item.file === 1"></i>
                  <p style="text-align: center">Nom: <strong>{{ item[0].name }}</strong></p>
                  <p><img ng-src="{{urlConstruc(item[0].kid)}}" alt=" "><p style="text-align: center">Type: <strong>{{ class[item[0].isa].name }}</strong></p>
                  <p style="text-align: center">Date: <strong>{{ item[0].date | date: 'dd/MM/yyyy' }}</strong></p>
               </td>
             </tr>
          </tbody>
        </table>
</div>

＆＃13;

Answer 1

像这样使用Flexbox

.container {
  display: flex;
  align-items: center;
}

.abc {
  width: 80%;
}

img {
  width: 20%;
}

.abc {
  display: flex;
  flex-direction: column;
}

<div class="my-container">
  <div class="constrained">
    <table class="table table-condensed table-hover" infinite-scroll="loadMore()" infinite-scroll-container="'.constrained'">
      <tbody>
        <tr ng-repeat="item in list | limitTo: packetIndex + packetSize" ng-click="preview(item[0])" ng-class="{active: item[0].selected}">
          <td>
            <div class="container">

              <img ng-src="{{urlConstruc(item[0].kid)}}" alt=" ">
              <div class="abc">
                <p style="text-align: center">Nom: <strong>{{ item[0].name }}</strong></p>

                <p style="text-align: center">Type: <strong>{{ class[item[0].isa].name }}</strong></p>
                <p style="text-align: center">Date: <strong>{{ item[0].date | date: 'dd/MM/yyyy' }}</strong></p>
              </div>

            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 2

试试这个，我也创建了jsfiddle：https://jsfiddle.net/afu16g9k/4/#&togetherjs=5U562O7acI

<table width=500>
<tr>
<td align="left">
<img src="https://cdn.vox- cdn.com/thumbor/7fboRS8AmuMpmYvgRBlyOuwhipM=/0x0:1000x750/1200x800/filters:focal(0x0:1000x750)/cdn.vox-cdn.com/uploads/chorus_image/image/49579581/mobile-magic_chanpipatshutterstock.0.jpg" width="200" height="200" alt=" " align="left">
<span style="text-align:left">  
<p style="text-align: ">Nom: <strong>{{ item[0].name }}</strong></p>    
    <p style="text-align: ">Type: <strong>{{ class[item[0].isa].name }}</strong></p>
    <p style="text-align: ">Date: <strong>{{ item[0].date | date: 'dd/MM/yyyy' }} 
</strong></p>
<span>
 </td>
</tr>
</table>

如何将图像设置到左中间，符合我的3段？

2 个答案: