css - 如何水平居中图像？

Question

我正在尝试将图像集中在容器中，但它不起作用。到目前为止，css 看起来像这样；

#wrap{
min-height: 100%;
}
#imagebar{
 position:fixed;
 margin:0 auto;
 top:60%;
    width: 100%;
    height: 200px;
    background: yellow;
}
#albums{
margin:8px;
    display: inline-block;              
}

我的网站是http://www.robcnossen.nl/

我以为 margin-left:auto;margin-right:auto; 会很好，但认为并没有像我想象的那样工作。有人可以帮我吗？

谢谢...

Answer 1

#imagebar {text-align:center;}

您的图像不是块级元素，因此只需应用text-align:center;到它们的父级就可以了。

Answer 2

由于#imagebar宽度为 100%，因此它会自动居中。您可以使用text-align: centerwithin使图像居中#imagebar。

#imagebar但是，我认为您想要一个居中的特定“内容框” 。

您可以通过在内部创建一个#imagebar具有固定宽度（以 px 或 % 为单位）的 div 并添加margin: 0 auto到该内部 div 来解决此问题。