复杂的CSS图像居中帮助？

Question

我的问题比标题说的要复杂一些。抱歉，我不知道如何更具体...

我正在开发一个网站，我遇到了应该显示一些缩略图的部分。问题是，缩略图的尺寸不匹配。 （我知道，这听起来很荒谬，因为这是缩略图，对吧？）不，根本没有办法在相同的维度上创建它们！我已经设法创建了一个 HTML+CSS 结构来解决这个问题，如果图像在保持纵横比的同时更小，则不会拉伸以适应其容器。

剩下的唯一问题是将图像居中。由于将边距设置为“0 auto”或“auto 0”没有帮助，我尝试设置 multiple containers and setting the margins 来定位图像。这也不起作用：如果我将 120x120 的图片放入 120x80 的内部容器中，并将容器的顶部和左侧边距设置为 -50%，则边距变为 -60px。这可以解决吗？或者还有其他方法可以使图像居中吗？

我愿意接受任何建议！

HTML：

<div id="roll">
<div class="imgfix">
    <div class="outer">
        <div class="inner">
            @if (ImageDimensionHelper.WhereToAlignImg(item.Width, item.Height, 120, 82) == ImgAlign.Width)

            <!-- ImageDimensionHelper tells me if the image should fit the 
            container with its width or height. I set the class of the img
            accordingly. -->

            {
            <img class="width" src="@Url.Content(item.URL)" alt="@item.Name"/>
            }
            else 
            {
            <img class="height" src="@Url.Content(item.URL)" alt="@item.Name"/>
            }    
            </div>
        </div>
    </div>
</div>

CSS：

.imgfix{ overflow:hidden; }
.imgfix .outer { width:100%; height:100%;}
.imgfix .inner { width:100%; height:100%; margin-top:-50%; margin-left:-50%; }
/*This div (.inner) gets -60px for both margins every time, regardless of the size of itself, or the image inside it*/
#roll .imgfix { width:120px; height:82px; border: 1px #5b91ba solid; } 
#roll .imgfix .outer { margin-top:41px; margin-left:60px; }
/*since I know specificly what these margins should be, I set them explicitly, because 50% got the wrong size.*/
#roll .imgfix img.width { width:120px; height:auto; margin: auto 0; }
#roll .imgfix img.height { height:82px; width:auto; margin: 0 auto; }

Answer 1

如果我理解正确this demo 应该做你想做的事。但是，它不适用于所有浏览器。所以如果你需要支持IE6/7，那么这不是正确的解决方案。

编辑：

我的问题比标题说的要复杂一些

这是轻描淡写！

我认为我有something working，尽管您需要根据图像的大小添加一些内联样式。大部分 CSS 是共享的，因此只有 margin-left 和 margin-top 需要设置，具体取决于您要居中的图像是大于还是小于一个或两个缩略图尺寸（在此示例中为 120x80px )。

我从您的问题中看到，您知道服务器端代码中的图像尺寸，因此您应该能够概括为每个图像创建必要的内联样式的逻辑。总之，对于任何给定的img

，我都使用了两种通用样式之一

img.stretchHorizontal { /* use when img width < 120px */
    width:100%;
}
img.stretchVertical { /* use when img height < 80px */
    height:100%;
}

为了完整性而保留的 CSS：

.outer {
    width:120px;
    height:80px;
    border:1px #5b91ba solid;
    overflow:hidden;
    display:inline-block; /* not necessary, but nice for demo */
}
.inner {
    width:120px;
    height:80px;
}
#roll {
    margin:100px 0 0 100px; /* just to move everything down and left a bit */
}

然后根据图像是否需要.stretchHorizontal 或.stretchVertical，添加计算得出的margin-top、margin-left 或margin-top 和margin-left。一般规则似乎是：

• 如果stretchVertical添加margin-left:(scaled img width/-2)+(inner width/2)
• 如果拉伸水平添加margin-top:((scaled img height)/-2)+(inner height /2)
• 如果不需要拉伸（img 大于 120x80）添加 margin-top:img height - 80/-2 和 margin-left:(img width/-2)+(inner width/2)

demo 使用几种不同的图像尺寸作为示例。

<div id="roll">
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/100 * 100 = 120)/-2)+ 40 = -20px -->
            <img class="stretchHorizontal" src="viewport/yoda.jpg" alt=""/> <!-- 100x100 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:0 0 0 -100px">
            <!-- margin-left:(scaled img width/-2)+(inner width/2) so margin-left:((80/80 * 320 /-2)+60 = -160+60 = -100px-->
            <img class="stretchVertical" src="viewport/galaxies.png" alt=""/> <!-- 320x80 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/120 * 120 = 120)/-2)+ 40 = -60 + 40 = -20px margin-left:(120/-2)+60 = 0-->
            <img src="viewport/luke.jpg" alt=""/> <!-- 120x120 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-160px 0 0 -190px">
            <!--  margin-top:img height - 80/-2 = -160px margin-left:(img width/-2)+(inner width/2) so margin-left:(500/-2)+60 = -190px-->
            <img src="viewport/cookie_cutter.jpg" alt=""/> <!-- 500x400 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-20px 0 0 0">
            <!-- margin-top:((scaled img height)/-2)+(inner height /2) = ((120/50 * 50 = 120)/-2)+ 40 = -20px -->
            <img class="stretchHorizontal" src="viewport/vadar.gif" alt=""/> <!-- 50x50 stretchVertical or stretchHorizontal does not matter for images smaller than both inner dimensions -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-50px 0 0 -65px">
            <!-- margin-top:img height - 80/-2 = -50px margin-left:(250/-2)+60=-65px -->
            <img src="viewport/starwars.jpg" alt=""/> <!-- 250x180 -->
        </div>
    </div><br/>
    <div class="outer">
        <div class="inner" style="margin:-50px 0 0 -30px">
            <!-- margin-top:img height - 80/-2 = -50px margin-left:(180/-2)+60=-30px-->
            <img src="viewport/big_luke.jpg" alt=""/> <!-- 180x180 -->
        </div>
    </div>
    <div class="outer">
        <div class="inner" style="margin:-200px 0 0 0">
            <!-- margin-top:scaled img height/-2+(inner height /2) so (120/50 * 200 = 480)/-2 = -240px + 40 = -200px-->
            <img class="stretchHorizontal" src="viewport/bookmark.jpg" alt=""/> <!-- 50x200 -->
        </div>
    </div>
</div>

我怀疑这完全没有错误，但我希望这是解决您的问题的良好开端 :-)

Answer 2

图像是内联的。将它们设置为 display:block 以使用 margin:auto 或仅在 div.inner 元素中使用 text-align:center。

对于垂直对齐，您需要将 display:table-cell 设置为 div.inner 元素，另外还有 vertical-align:middle