Question

我的项目中存在一些混乱

为什么文字不在标题的中间，这是我的html和css：

<body>
<header>
    <img height="55px" width="55px;" src="../pic/small-book.png">
    <span class="neworld">Neworld</span>
</header>
</body>

body{
  width: 1200px;
  height: auto;
  min-height: 600px;
  margin: 0 auto;
}
header{
  width: 1200px;
  height: 55px;
  background-color: white;
  line-height: 55px;
 }
header .neworld{
}

我想知道为什么新世界不在中间以及为什么它不可用margin-top：-10px;在标题.neworld

Answer 1

提供图片和文字float: left。它会工作。

选中此示例：Demo

Answer 2

如果您要将范围文本与图像垂直对齐，请添加以下规则：

header img {
  vertical-align: middle;
}

关于您的第二个问题，为什么您无法在margin-top: -10px元素上使用.neworld：因为边距只对block或inline-block元素产生影响。但默认情况下，span是inline元素。

＆＃13;

body {
  width: 1200px;
  height: auto;
  min-height: 600px;
  margin: 0 auto;
}

header {
  width: 1200px;
  height: 55px;
  background-color: white;
  line-height: 55px;
}

header img {
  vertical-align: middle;
}

＆＃13;

<body>
  <header>
    <img height="55px" width="55px;" src="../pic/small-book.png">
    <span class="neworld">Neworld</span>
  </header>
</body>

＆＃13;

Answer 3

只需将vertical-align:middle应用于图片：

＆＃13;

header img {
  vertical-align:middle;
}

＆＃13;

<body>
<header>
    <img height="55" width="55" src="../pic/small-book.png">
    <span class="neworld">Neworld</span>
</header>
</body>

＆＃13;

另外（仅供参考），在HTML中直接指定像素大小时，您不会包含px或分号，而设置width和/通常是个坏主意或height的{{1}}。

img后错误的位置文字

3 个答案: