如何水平居中图像？

Question

我正在尝试将图像置于容器中心，但它无法正常工作。 Til sofar 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: center中的#imagebar来集中图像。

但我认为您希望#imagebar中的特定“内容框”居中。

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