gpt4 book ai didi

css - 水平居中对齐缩略图

转载 作者:技术小花猫 更新时间:2023-10-29 11:25:25 25 4
gpt4 key购买 nike

以下是我在 html 中使用 twitter-bootstrap 的代码。我试图将输出居中对齐,但无论我做什么,图像都是左对齐的。

<ul class="thumbnails"> 
<li class="span5">
<a href="#" class="thumbnail"><img src="img.jpg" /></a>
</li>
</ul>

有什么简单的解决办法吗?

最佳答案

Twitter bootstrap 缩略图默认 float 到左侧,您必须在自己的样式表上覆盖该行为,以使其容器与 text-align:centerdisplay:inline-block 属性。试试这个:

CSS

.thumbnails {
text-align:center;
}

.thumbnails > li {
display: inline-block;
*display:inline; /* ie7 fix */
float: none; /* this is the part that makes it work */
}

这样,缩略图图像将在 .thumbnails 容器内居中。将 .thumbnail 类替换为您希望将图像居中的容器。

关于css - 水平居中对齐缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10103692/

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