html - CSS - not center aligning image properly

Question

i am having trouble center aligning images. The images should stay in center never mind what size your screen is. the problem is that the images are only center aligned until a specific size. my screen is quite small so they're perfectly centered, but when i go down to %75 the images are already not center aligned wich makes everything ugly. i'm going to save you from spamming my code here, so just view the source of this page.

Thank you for reading :)

Answer 1

你的代码已经很接近了，因为你的.headdiv 已经被内联阻塞了，而你#header的text-align: center. 您要做的是删除offset2，并将 更改span8为 a span12，使其包含整个宽度。

Answer 2

您将图像包装在一个span8 offset2div 中，这不是为了让它们居中，而是为了让元素保持在设定的宽度/左偏移。

尝试像这样设置父 div：

#showcase .row-fluid > div { margin: 0 auto; width: 612px }

Answer 3

div持有图像需要有

margin: 0 auto;

并且图像块需要具有：

float: none;
display: inline-block;

Answer 4

我在你的 CSS 和 HTML 代码中看到了这一点，如果你删除它（仅限 CSS）将保持在中心。

---

HTML

<div class="span8 offset2">

</div>

CSS

Before
.offset2:first-child {
    margin-left: 17.094%;
}
After
.offset2:first-child {
   /* margin-left: 17.094%;*/
}