Question

我有一个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>

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

Answer 1

图像是内联替换元素，因此无论输出多少图像，只需确保div足够宽（包含至少5个图像）并将text-align: center设置为

Answer 2

没有代码你已经尝试过很难回答，但是下面的内容可能就是你想要的东西：

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%:
}

Answer 3

这是自定义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/

Answer 4

只在你的CSS中做一件事

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

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

如何在div的中心显示n个图像

4 个答案: