css - 水平对齐缩略图
问题描述
我正在使用 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。
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'}
];
推荐阅读
- statistics - 贝叶斯网络计算
- typescript - 使用带有构造函数对象的类
- python - 添加多项式特征后如何预测测试数据?
- python-3.x - 如何使用 ffmpeg 减少音频文件中的回声?
- python-3.x - VsCode调试python代码无法访问本地站点包
- android - 无法从适配器暂停媒体播放器
- angular - 如何在页面加载时执行带有参数的函数
- firebase - Cloud Build:部署功能 - 错误:HTTP 错误:404,找不到方法
- python - 如何在 tkinter 中创建蒙版效果?
- ant - 即使在 java 错误之后 Ant 构建成功,如何使它失败?