Выравнивание эскиза по горизонтали

Я использую 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')];

Выход выглядит так.

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

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

Выравнивание эскиза по горизонтали

Это больше похоже на проблему с выравниванием CSS и Bootstrap ... Эти ссылки были бы полезны: w3schools.com/css/css_align.asp и getbootstrap.com/docs/4.0/layout/grid

— 23.12.2018 15:42

Вы используете класс col-md-12 сеточной системы Bootstrap. Это означает, что он будет использовать 12 из 12 столбцов, если размер экрана равен или больше размера md. Вы можете использовать что-то вроде col-md-3 для отображения 4 эскизов подряд.

— 23.12.2018 16:05

@Harun Yilmaz. Это сработало. Но миниатюры не отображаются так, как показано на изображении.

— 24.12.2018 19:05

css angular twitter-bootstrap angular6

23.12.2018 15:29

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

352

Ответы 1

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

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'}
    ];

Я добавил этот код в css .thumbnail {width: 200%; выравнивание текста: центр; высота: 500%; } .thumbnail img {ширина: 100%; высота: авто; дисплей: блок; } a .thumbnail {left: 600px; } --- мой второй объект из цикла for накладывается на первый. Что мне нужно добавить в css?

— 24.12.2018 20:49

@divyadave, этот код работает, нет необходимости добавлять CSS по горизонтали, или, если у вас все еще есть проблема, создайте ссылку для общего доступа https://stackblitz.com/ со мной.

— 24.12.2018 21:27

@divyadave отредактируйте мой ответ, пожалуйста, проверьте. и вам не нужно писать все больше и больше css, проходите с ссылка на сайт, прочтите это для целевого целевого устройства

— 25.12.2018 07:17

Я поделился с вами [ссылка] (angular-fc4wdx.stackblitz.io/#), здесь он идет правильно, и в случае реального проекта он не отображается должным образом

— 25.12.2018 09:18

@divyadave это похоже на конфликт css, ваше базовое свойство переопределяется из того места, где вы можете написать класс или CSS для того же имени класса, пожалуйста, и проверьте, где конфликт. проверьте и проверьте, какой класс переопределяет ваше текущее свойство, или вы можете сделать что-то одно - создать новый класс, которого нет в вашем проекте, и написать здесь весь код css. это ссылка, которой я с вами поделюсь (stackblitz.com/edit/…).

— 25.12.2018 10:10

23.12.2018 16:10