Javascript 如果小于父容器,则将所有图像居中

Javascript 如果小于父容器,则将所有图像居中,javascript,jquery,html,css,smooth-scrolling,Javascript,Jquery,Html,Css,Smooth Scrolling,如果我有足够的图像,我的代码就可以正常工作:它可以滚动,一切都很好 但是,如果图像的组合宽度小于父div的宽度,则它不会滚动(正如预期的那样),但所有图像都将向左对齐 如何使它们与中心对齐 我很确定这很容易,但我就是找不到解决办法 如果有人能帮忙,我将不胜感激 谢谢 凯 它适用于此插件: 我的CSS看起来像这样 #makeMeScrollable { width:100%; height: 55px; position: relative;

如果我有足够的图像,我的代码就可以正常工作:它可以滚动,一切都很好

但是,如果图像的组合宽度小于父div的宽度,则它不会滚动(正如预期的那样),但所有图像都将向左对齐

如何使它们与中心对齐

我很确定这很容易,但我就是找不到解决办法

如果有人能帮忙,我将不胜感激

谢谢 凯

它适用于此插件:

我的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>

在图像上尝试
边距:自动
,因为这将使块级元素居中。

尝试此操作

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


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