Question

我需要在标题的中间显示一个徽标，所以我把它放在一个具有以下属性的div中：

header {
    background:#840CFF;
    width:100%;
    padding: 30px;
    text-align: center;
}

div.logo-main{
    display: inline-block;
    padding: 0px;
}

body {
    margin:0;
    padding: 0;
    border: 0;
}

但是log实际上向左移了一点。为什么呢？

UPD：HTML代码：

<body>
    <header>
        <div class = "logo-main">
            <img src="logo_forest.png">
        </div>
    </header>
</body>

Answer 1

删除左右两侧的填充。使用padding: 30px 0代替padding: 30px

header {
  background: #840CFF;
  width: 100%;
  padding: 30px 0;
  text-align: center;
}
div.logo-main {
  display: inline-block;
  padding: 0px;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
}

<header>
  <div class="logo-main">
    <img src="http://placehold.it/300x300">
  </div>
</header>

Answer 2

有几种不同的方法可以实现这一目标。

您尝试执行的方法似乎是简单的text-align方法。这使得元素“流动”与文本和中心本身在中间。

另一个有点复杂（当我第一次开始使用这种方法时，我做了）。您希望使元素具有“自动”边距，以便将其置于中心位置。这是第一个简单的方法

header{width:100%;padding:0;text-align:center;/*remove your 30px padding. It's what's causing the positioning error*/}
.logo-main{display:inline-block;}

现在用于稍微复杂的方法：

header{position:relative;width:/*not sure you need to set a block element 100%?*/}
.logo-main{position:absolute;top:30px;/*what you set with padding*/left:0;right:0;margin:0px;auto;}

但回到你有位置错误的原因是因为你将标题设置为100％。然后向所有方面添加30px。因此，100％+（30px + 30px）意味着标题实际上可能比它的父容器大60px。让.logo-main偏离中心30px。

中心div内的图片移动了一点

2 个答案: