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

标签 html css twitter-bootstrap

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

相关文章:

html - 在 CSS 中突出显示右边距较短的文本

c# - Jquery UI - asp.net 上的 Accordion

html - Bootstrap 对齐 - 导航标题对齐

css - 如何设置折叠的反向 Bootstrap 导航栏下边框颜色的样式?

javascript - 从打印内容保存 pdf HTML JAVASCRIPT

html - 在 CSS 中为一行添加边距(至少这是我想做的?)

javascript - 无法使用 WATER 单击链接

html - 悬停父元素时子元素上的 CSS 过渡

twitter-bootstrap - Bootstrap 导航栏链接文本在 google chrome 中崩溃但在 firefox 中没有

使用 jQuery 输入表单的 javascript 效果