Выравнивание миниатюры по горизонтали - PullRequest
Новая
       43

Выравнивание миниатюры по горизонтали

0 голосов
/ 23 декабря 2018

Я использую Angular 7

Я использовал класс миниатюр изображений начальной загрузки, он выравнивается по вертикали, я хочу выровнять по горизонтали. 

.thumbnail
{
text-align: center;
float: left;
}
.row
{
text-align: center;
}

Ниже приведен мой код: 

 <div class= "row">
 <div class = "col-xs-12">
 <button class="btn btn-success">New Recipe</button>
 </div>
 <hr>
  <div class = "col-md-12" >
  <a href="#" class="thumbnail" *ngFor="let recipe of recipes">
    <img src = "{{ recipe.imagePath }}" alt="{{ recipe.name }}" class = 
     "img-responsive" class="img-thumbnail">
    <h4 class = "caption">{{ recipe.name }}</h4>
    <p class = "caption">{{ recipe.description }}</p>
</a>
<app-recepie-item></app-recepie-item>
</div>
</div>

Have created 2 objects

recipes: Recipe [] = [ new Recipe('My Sample Recipe', 'This is my first 
recipe', 'image url'),
new Recipe('Potato Recipe', 'This an actual Potato 
Recipe', 'http://coastguard.dodlive.mil/files/2014/04/unnamed-2- 
560x281.jpg')];

Вывод выглядит следующим образом.

Миниатюры отображаются вертикально.

Я хочу отображать горизонтально.

enter image description here

1 Ответ

0 голосов
/ 23 декабря 2018

Я думаю, вам не нужно писать больше css, если вы используете свойство grid начальной загрузки для выравнивания.

HTML: 

 <div class="container">
  <div class="row">
    <div class = "col-xs-12">
      <button class="btn btn-success">New Recipe</button>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-4 col-xs-4" *ngFor="let recipe of recipes">
      <a href="#">
      <img src={{recipe.url}} height="100" width="100">
      <h4 class = "caption">{{ recipe.name }}</h4>
        <p class = "caption">{{ recipe.desc }}</p>
      </a>
    </div>
  </div>
</div>

TS: 

recipes: any[] = [
    {name:'product_name', desc: 'Description', url: 'http://www.movingimage.us/images/homepage/features/jhe_jim_kermit.jpg'},
    {name:'product_name', desc: 'Description', url: 'http://www.movingimage.us/images/homepage/features/jhe_jim_kermit.jpg'},
    {name:'product_name', desc: 'Description', url: 'http://wallpaper-gallery.net/images/image/image-8.jpg'}
    ];
...