我是编码的新手,需要一些有关使用 CSS 对齐图像的帮助。程序需要拍照,每拍一张照片,需要在线添加一张图片的缩略图。使用“边距:自动”,每次添加图片时我都能让它们保持居中。但是,我需要让每个缩略图尽可能居中,消除它们排列时出现的大间隙。
When no pictures have been added yet
我想让图像更加集中,这样它们之间就不会有太大的差距
编辑: 这是HTML代码
<ion-content padding>
<ul id="progressbar">
<li class="active"></li>
<li class="active"></li>
<li class="active">Take Accident Photos</li>
<li></li>
<li></li>
</ul>
<h4>Vehicle I Photos</h4>
<ion-buttons right>
<button style="height:2.0em;" color="bground" ion-button icon-only (click)="getPicture()">
<ion-icon color="white" name="add"></ion-icon>
</button>
</ion-buttons>
<ion-slides class="image-slider" loop="true" slidesPerView="5">
<ion-slide *ngFor="let img of veh1Image">
<img src="{{img}}" class="thumb-img" imageViewer/>
</ion-slide>
</ion-slides>
这是CSS代码:
page-take-photo {
ion-card-header {
background-color: #CCCCCC;
}
ion-card{
height: 200px;
}
ion-scroll {
height: 200px;
}
ion-slide.swiper-slide {
margin: auto;
}
.flex-container {
display: flex;
justify-content: center;
}
.slide-zoom {
background: #e6e6e6;
}
.thumb-img {
padding: 10px;
}
.image-slider{
height: 200px !important;
}
}
最佳答案
您可以使用 flex 容器来实现元素的居中集合。
display: flex;
在容器上,带有 justify-content; center
使 flex 元素居中。
在这里阅读更多关于 flexbox 的信息:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.flex-container {
display: flex;
justify-content: center;
}
.item {
padding: 10px;
margin: 2px;
background: green;
}
<div class="flex-container">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
关于html - 在 Ionic 元素中使用 CSS 添加新图片时保持图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47837646/