Html 无法将引导映像库居中
我使用的是Bootstrap image gallery found,我很难将缩略图集中在页面上 在我为样式添加“最大宽度”(max width)以限制一行上的缩略图数量之前,它们会一直居中 该网页是,以下是我的代码:Html 无法将引导映像库居中,html,css,twitter-bootstrap,bootstrap-image-gallery,Html,Css,Twitter Bootstrap,Bootstrap Image Gallery,我使用的是Bootstrap image gallery found,我很难将缩略图集中在页面上 在我为样式添加“最大宽度”(max width)以限制一行上的缩略图数量之前,它们会一直居中 该网页是,以下是我的代码: <div id="links" class="text-center div-gallery"> <a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj1.jpg" title="1"
<div id="links" class="text-center div-gallery">
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj1.jpg" title="1" data-gallery> <!-- Image -->
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj1t.jpg" class="img-gal-box" alt="1"> <!-- Thumbnail -->
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj2.jpg" title="2" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj2t.jpg" class="img-gal-box" alt="2">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj3.jpg" title="3" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj3t.jpg" class="img-gal-box" alt="3">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj4.jpg" title="4" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj4t.jpg" class="img-gal-box" alt="4">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj5.jpg" title="5" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj5t.jpg" class="img-gal-box" alt="5">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj6.jpg" title="6" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj6t.jpg" class="img-gal-box" alt="6">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj7.jpg" title="7" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj7t.jpg" class="img-gal-box" alt="7">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj8.jpg" title="8" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj8t.jpg" class="img-gal-box" alt="8">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj9.jpg" title="9" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj9t.jpg" class="img-gal-box" alt="9">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj10.jpgg" title="10" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj10t.jpg" class="img-gal-box" alt="10">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj11.jpg" title="11" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj11t.jpg" class="img-gal-box" alt="11">
</a>
<a href="http://te-al.co.uk/images/portfolio/abbyjan/gallery/aj12.jpg" title="12" data-gallery>
<img src="http://te-al.co.uk/images/portfolio/abbyjan/thumbnails/aj12t.jpg" class="img-gal-box" alt="12">
</a>
</div>
添加边距属性:
.div-gallery {
margin: auto;
}
这与您之前设置的固定宽度一起将使您的图库居中。谢谢,我的理解正在增长。我认为margin:***等同于margin:-top-right-bottom-left或类似的东西吗?是的,@Alex,但是还有其他版本有3和2个参数-参见这里
div-gallery {
padding: 1%;
max-width: 767px;
margin: -2% auto 0 auto;
}
div-gallery {
padding: 1%;
max-width: 767px;
margin: -2% auto 0 auto;
}