gpt4 book ai didi

html - 使用 Bootstrap 动态居中水平图像

转载 作者:行者123 更新时间:2023-11-28 03:10:26 24 4
gpt4 key购买 nike

我有一个 mysqli_fetch_assoc 返回图像。我需要将所有这些图像水平居中。我尝试在所有这些上使用中心 block ,但只有一个居中,其他图像下降。

例如:

如果mysql给我2张图片:

<body>

<div class="col-xs-12">

<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">

</div>
</body>

https://jsfiddle.net/ff4rj8zs/

如果mysql给我3张图片:

<body>

<div class="col-xs-12">

<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30" class="center-block">

</div>
</body>

https://jsfiddle.net/96czjmoh/

如您所见,图像下降,并且不在同一行。我需要所有图像都在同一条线上居中,而与数量无关。

谢谢!

最佳答案

使用这个:

<body>

<div class="col-xs-12 text-center">

<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">
<img src="http://osolephp.com.es/grafa/imagenes/imagenesropa/cocinas_6.png?30">

</div>
</body>

参见:https://jsfiddle.net/ff4rj8zs/3/

关于html - 使用 Bootstrap 动态居中水平图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45746226/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com