将响应式缩略图库居中
Centre a responsive thumbnail gallery
这是我的网站:
http://www.gregorydanelian.comule.com/ken
我希望缩略图库始终居中,但我无法做到这一点。
我知道我可以使用
text-align: center;
在父元素上,然后像这样设置缩略图:
display: inline-block;
但是没有任何效果,缩略图总是向左浮动。
我已尝试添加媒体查询以强制从左侧留出边距(例如):
@media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;
}
}
但必须有更简单的方法来使 ul 居中,无论宽度是多少。
如何使缩略图库在所有浏览器宽度上居中?
添加这个CSS媒体查询
@media (min-width: 1200px)
.thumbnails {
max-width:1200px
}
您可能需要针对多个屏幕调整媒体查询。
添加这些更改并删除您在 ul
上 !important
设置的 left-margins
.thumbnails > li {
display: inline-block;
float: none;
margin-bottom: 20px;
margin-left: 20px;
}
.thumbnails {
margin: 0 auto;
text-align: center;
width: 100%;
}
重要提示:将此添加到 css/mystyles.css
文件的末尾。
这是我的网站:
http://www.gregorydanelian.comule.com/ken
我希望缩略图库始终居中,但我无法做到这一点。
我知道我可以使用
text-align: center;
在父元素上,然后像这样设置缩略图:
display: inline-block;
但是没有任何效果,缩略图总是向左浮动。
我已尝试添加媒体查询以强制从左侧留出边距(例如):
@media (max-width: 767px) {
.thumbnails{
margin-left: 40px!important;
}
}
但必须有更简单的方法来使 ul 居中,无论宽度是多少。
如何使缩略图库在所有浏览器宽度上居中?
添加这个CSS媒体查询
@media (min-width: 1200px)
.thumbnails {
max-width:1200px
}
您可能需要针对多个屏幕调整媒体查询。
添加这些更改并删除您在 ul
!important
设置的 left-margins
.thumbnails > li {
display: inline-block;
float: none;
margin-bottom: 20px;
margin-left: 20px;
}
.thumbnails {
margin: 0 auto;
text-align: center;
width: 100%;
}
重要提示:将此添加到 css/mystyles.css
文件的末尾。