Question

我可能会发疯，但我似乎无法找出我做错了什么。我只是想把我的形象集中在一起。

<div class="container ">
    <img src="design/images/logo.png" alt="logo" class="logo" />
    <div class="contactData">
        data
    </div>
</div>

这是我的CSS：

.container {
    max-width: 978px;
    width: calc(100% - 46px);
    height: 300px;
    margin: 0 auto;
    padding-left: 23px;
    padding-right: 23px;

.logo {
        width: 337px;
        height: 76px;
        margin: 0 auto;
        float: none;
    }

 .contactData {
        max-width: 206px;
        margin: 30px auto 0 auto;
        text-align: center;
        float: none;
  }

contactData div恰好居中，但图片没有。

Answer 1

在display:block;

中添加.logo

那可能应该解决它

Answer 2

在使用display: block;图片时使用display: inline-block;或margin: auto;。

.logo {
    width: 337px;
    height: 76px;
    margin: 0 auto;
    float: none;
    display: block;
}

默认情况下，图片为inline，您需要触发hasLayout或类似内容。

Answer 3

添加此代码

.container {
    max-width: 978px;
    width: calc(100% - 46px);
    height: 300px;
    margin: 0 auto;
    padding-left: 23px;
    padding-right: 23px;
  text-align: center;
  vertical-align: middle;

Answer 4

在.logo中，只需在CSS中添加display:block;。

Answer 5

您没有为图像指定任何对齐方式。在容器类中，Just give

text-align:center;

中心图像不起作用？

5 个答案: