如果小于父容器，则将所有图像居中答案

【问题标题】：Center all images if smaller than parent container如果小于父容器，则将所有图像居中
【发布时间】：2012-09-27 21:34:16
【问题描述】：

如果我有足够的图像，我的代码可以正常工作：它可以滚动并且一切都很好。

但是，如果图像的组合宽度小于父 div 的宽度，则它不会滚动（如应有的那样），但所有图像都向左对齐。

如何让它们与中心对齐？

我很确定这很容易，但我找不到解决方案。

如果有人可以帮忙，我将不胜感激。

谢谢启

这个插件是：http://www.smoothdivscroll.com/

我的 CSS 看起来像这样

#makeMeScrollable
    {
        width:100%;
        height: 55px;
        position: relative;
        margin: 20px 0; 
    }
#makeMeScrollable div.scrollableArea img, #makeMeScrollable div.scrollableArea a
{
position: relative;
float: left;
margin: 0 10px;
padding: 0;

filter: url(stylesheets/filters.svg#grayscale); /* Firefox 3.5+ */ 
filter: gray; /* IE6-9 */ 
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */

/* If you don't want the images in the scroller to be selectable, try the following
    block of code. It's just a nice feature that prevent the images from
    accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#makeMeScrollable div.scrollableArea img:hover, #makeMeScrollable div.scrollableArea a:hover
{
filter: none; 
-webkit-filter: grayscale(0); 
}

html 是：

<div id = "makeMeScrollable">
            <img src = "images/test.png"
               id = "1" />

            <img src = "images/test2.png"
               id = "2" />
        </div>

【问题讨论】：

您需要显示您的标记。该方法因您构建图像的方式而异。 @jtheman - 仅当它们设置为 display:block 时才有效。如果它们包含浮动或非块级的元素，则不会工作......这个问题确实需要更具体才能给出一个体面的答案。
如果您向我们展示您出色的代码，那么我们可以提供帮助。您可能希望有一个居中的周围容器 DIV，但如果没有代码则不清楚。
如果您需要更多帮助，请告诉我们您的结构是什么，但是 jtheman 建议的 css，或者使用 display: box 或使用表格，或者......如果不了解更多信息真的很难

标签： javascript jquery html css smooth-scrolling

【解决方案1】：

在您的图片上尝试margin:auto，因为这将使块级元素居中。

【讨论】：

【解决方案2】：

试试这个

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

【讨论】：