Question

我在这种复杂程度上相对较新 - 无论如何，在Squarespace平台上创建一个网页，该网页将包含一个代码块，该代码块显示包含12个可点击图块的网格，其中包含悬停响应和点击功能。虽然Squarespace具有内置的响应能力，但代码块中的任何内容都可以免除。

所以，我遇到的问题是，在完全打开的浏览器窗口上显示时，我的12个图块的精确居中网格仅居中。随着浏览器窗口的大小减小并且切片开始堆叠，网格将向右对齐。我已经将画廊放入div中以获得原始居中。

无论浏览器尺寸如何，都有办法强制居中吗？

要查看行为中的行为，请更改jsfiddle的结果窗口大小：

http://jsfiddle.net/terryogara/VQ3hk/

谢谢，这里是代码：

<style type="text/css">

.caption-style-1 li{
list-style-type: none;
margin: 0px;
padding: 5px;
position: relative;
overflow: hidden;   
}

.caption-style-1 li:hover .caption{
opacity: 1;
}

.caption-style-1 li:active .caption{
opacity: .5;
}

.caption-style-1 img{
float: left;
}

.caption-style-1 .caption{
cursor: pointer;
position: absolute;
opacity: 0;
-webkit-transition:all 0.45s ease-in-out;
-moz-transition:all 0.45s ease-in-out;
-o-transition:all 0.45s ease-in-out;
-ms-transition:all 0.45s ease-in-out;
transition:all 0.45s ease-in-out;
}

.caption-style-1 .blur{
background-color: rgba(0,0,0,0.65);
height: 180px;
width: 180px;
position: relative;
}

.caption-style-1 .caption-text{
position: absolute;
width: 180px;
height: 180px;
text-align: center;
top:10px;
}

.outer-container {
width: 100%;
min-width: 980px
margin: 0 auto;
text-align: center;
}

.inner-container {
display: inline-block;
}

</style>

<!-- CONTENT -->

<!--  OUTER CONTAINER -->

<div class="outer-container">
<ul class="caption-style-1">

<!--  ROW 1 TOP | IMAGE GALLERY 1 -->
<div class="inner-container">

<!--  IMAGE 1 -->
<div style="float: right;">
<div style="float: right;">
<a href="http://www.example.com">
<li>
<img src="http://murmurhaus.com/wp-content/uploads/2014/07/ph-180x180.png" height="180" width="180" alt="ALT">
<div class="caption">
    <div class="blur"></div>
<div class="caption-text">
<h1>TEXT HERE</h1>
</div>
</div>
</li></a>
</div>

<!--  IMAGE 2 -->
<div style="float: right;">
<a href="http://www.google.com">
<li>
<img src="http://murmurhaus.com/wp-content/uploads/2014/07/ph-180x180.png" height="180" width="180" alt="ALT">
<div class="caption">
    <div class="blur"></div>
<div class="caption-text">
<h1>TEXT HERE</h1>
</div>
</div>
</li></a>
</div>
</div>

<!--  IMAGE 3 -->
<div style="float: right;">
<div style="float: right;">
<a href="http://http://stackoverflow.com/">
<li>
<img src="http://murmurhaus.com/wp-content/uploads/2014/07/ph-180x180.png" height="180" width="180" alt="ALT">
<div class="caption">
    <div class="blur"></div>
<div class="caption-text">
<h1>TEXT HERE</h1>
</div>
</div>
</li></a>
</div>

<!--  IMAGE 4 -->
<div style="float: right;">
<li>
<img src="http://murmurhaus.com/wp-content/uploads/2014/07/ph-180x180.png" height="180" width="180" alt="ALT">
<div class="caption">
    <div class="blur"></div>
<div class="caption-text">
<h1>TEXT HERE</h1>
</div>
</div>
</li></a>
</div>
</div>
<!--  END GALLERY 1-->
<!--  CLOSE INNER CONTAINER -->
</div>
  <!--  CLOSE OUTER CONTAINER -->
</ul>
</div>
<!--  END ROW 1 -->

更正备用屏幕尺寸的图像堆叠顺序和列对齐

0 个答案: