0

我有一个 div 里面显示图像。我从数据库动态加载了 1 到 5 张图像。所以没有。图像不固定。我想在 div 中居中图像，而不管它们的数量。请帮忙！！！！！！！！

<div class="sliderImg" style="width:975px; height:306px;text-align:center;">

                 <img id="img1" runat="server" visible="false" width="195" height="306" alt="slider">

                 <img id="img2" runat="server" visible="false" width="195" height="306" alt="slider">

                 <img id="img3" runat="server" visible="false" width="195" height="306" alt="slider">

                 <img id="img4" runat="server" visible="false" width="195" height="306" alt="slider">

                 <img id="img4" runat="server" visible="false" width="195" height="306" alt="slider">     





                    </div>

从后面的代码中，我根据某些条件设置了它们的可见性。

4

4 回答 4

0

图像是内联替换元素，所以无论输出多少图像，只要确保有div足够宽（至少包含 5 张图像）并设置text-align: center为它

于 2013-10-23T07:36:20.187 回答
0

如果没有您已经尝试过的代码，则很难回答，但是您可能正在寻找类似以下内容：

HTML：

<div>
  <img src="http://placehold.it/150x150" />
  <img src="http://placehold.it/150x150" />
  <img src="http://placehold.it/150x150" />
</div>

CSS：

div {
 text-align: center;
 width: 100%:
}
于 2013-10-23T07:36:35.130 回答
0

在你的 CSS 中只做一件事

.sliderImg{width:975px; height:306px;text-align:center;}
.sliderImg img{ display:block; margin:0 auto; text-align:center;}

希望您的问题在使用后得到解决。

于 2013-10-23T07:45:19.390 回答
0

这是自定义 div 容器中垂直和水平居中元素的示例。

html:

<div class="images">
    <!-- images -->
    <img src="#" />
    <img src="#" />
    <img src="#" />
</div>

CSS：

.images
{
    /* centering image */
    text-align: center;

    /* container size */
    display: block;
    height: 100px;
    line-height: 100px;
    width: 100%;

    /* reset 'paddings' */
    font-size: 0;

    /* for example */
    background: #f8f8f8;
}

.images img
{
    /* for centering image */
    display: inline-block;
    vertical-align: middle

    /* image size */
    width: 50px;
    height: 50px;
    border: 1px #f00 solid;

    /* for example */
    vertical-align: middle;
}

所以，看看这个小提琴：http: //jsfiddle.net/artem_fitiskin/saq6E/

于 2013-10-23T07:42:11.340 回答