CODEWITHSUNDEEP
htmlcss
Sendo Tks
Sendo Tks

Reputation: 81

How can i do to set the image to the middle left, accorded to my 3 paragraph?

Here is the HTML i'm in a table but i just want for each row of my table, the image to be at the left middle and my 3 paragraph in the middle of the row, the image has to be aligned with text. in the present code the image is at the left but in the line between "Nom" and "Type" so it's not aligned

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

Upvotes: 2

Views: 61

Answers (2)

Sandeep Saroha
Sandeep Saroha

Reputation: 72

Try this, I also created 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>

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

Use Flexbox like this

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

Upvotes: 1

Related Questions