由于不可能进行负填充，我如何缩小我的 div？我如何集中它？答案

【问题标题】：How do I shrink my div since negative padding isn't possible? How do I centralize it?由于不可能进行负填充，我如何缩小我的 div？我如何集中它？
【发布时间】：2020-05-27 06:40:58
【问题描述】：

我正在尝试建立一个网站来测试我的知识。现在我正试图在网站的顶部中心制作一个“徽标”，但我在将文本制作成我想要的位置时遇到了问题，并且围绕徽标文本的 div 存在很大问题。

:root {
  --text-font: "Trebuchet MS";
  --text-color: #5c0a0a;
  --box-color: #de7188;
  --border-color: pink;
}

header {
  font-family: var(--text-font);
  color: var(--text-color);
  text-align: center;
  font-family: "Alex Brush", cursive;
  font-size: 3em;
  margin-top: -1em;
  text-shadow: 2px 2px 5px white;
}

body {
  background: url(Images/Background.jpg);
  background-color: tomato;
  color: var(--text-color);
  font-family: var(--text-font);
}

#logo {
  background-color: var(--box-color);
  border: 0.15em solid var(--border-color);
  border-radius: 5em;
  width: 11em;
}

#motto {
  font-size: 1em;
  margin-top: -2em;
}

<link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet">

<header>
  <div id="logo">
    <h1>
      Sitename
    </h1>
    <h2 id="motto">
      Motto Goes Here<br><br>
    </h2>
  </div>
</header>

<body>
  <h2>
    Filler
  </h2>
  <p>
    Some filler text that I may replace with something later.
  </p>

【问题讨论】：

你想要的结果到底是什么？
除了“缩小我的 div”之外，您还没有真正解释过您需要/想要做什么以及如何做 - 您能澄清一下吗？
我想减少徽标 div 的顶部和底部填充，将其中的文本集中在其中，并将 div 本身集中在页面顶部。
也许在H2 之后删除BR 标签可能会有所帮助——它们不是必需的

标签： html css

【解决方案1】：

你可以简单地使用

#logo{
    margin: 0 auto;
}

至于高度，我不建议使用<br> 在底部留出空间，也许声明#motto 的高度会为您解决问题。

【讨论】：

非常感谢。 margin: 0 auto; 确实有效，删除换行符也是如此。我想我有这些是为了更早的目的，并没有意识到我把它们忘在那里了。为我的#motto 添加高度是我一直在寻找的，但现在我遇到了一个问题，即 div 被卡在页面顶部。不确定如何解决它，我在#logo 中尝试过margin-top，但它没有用。再次感谢您抽出宝贵时间回复。
没关系，我想我找到了问题所在。它在我的header 的页边空白处。我现在已经修好了，div 不再卡在顶部了。

【解决方案2】：

您可以使用 CSS margin: 0 auto 将 div 水平集中。

喜欢

#logo {
    margin: 0 auto;
}

现在你的文本有了h1 标签。每个浏览器都有一些预定义的 css 规则。

您必须指定媒体查询并覆盖这些规则

h1 { // for large screens i.e. desktop, laptop
   margin: 0.67em;
}

@media only screen and (max-width: 768px) { // for the devices of width less than 768px
   h1 {
       margin: 0.3em;
   } 
}

h2 标签也一样

【讨论】：

谢谢。添加margin: 0 auto; 确实解决了集中化问题，但其余的对我来说并没有解决问题。我正在尝试移动#logo div，但我不知道该怎么做。我尝试使用margin-top，但它什么也没做。问题是它卡在页面顶部，我需要一些空间。感谢你的宝贵时间。编辑：向h1 添加边距没有做任何事情，至少在我这边。
没关系，我想我找到了问题所在。它在我的header 的页边空白处。我现在已经修好了，div 不再卡在顶部了。