Html 我怎样才能使这个图像不干扰标题的位置

下面是它的外观：

如果删除图像，文本将完全居中：

@A.B

我是说，它起作用了。。。某种程度上。

我有一些问题的图像推动标题的权利，因为你可以看到，它不是完全居中

HTML:

试试这个

header {
    float: left;
    clear: both;
    width: 96%;
    color: #fff;
    background-color: #660066;
    padding: 1%;
    margin-left: 1%;    
    position:relative;
}
header img {

  width: 12%;  
  height: 12%;  
  background: #660066;
  position:absolute;
  left:0;
  top:0;

 }

---

有几种不同的方法可以做到这一点，您可以使用

position:absolute或更可扩展的方式如下所示：

<header>
    <img src="Images/catlogo.jpg" alt= "logo"/>
    <h1 class="centerTitle">Mobile Cat Grooming Service</h1>
</header>

我不确定您希望图像与页面和/或页眉对齐的方式，但图像将
h1
推到上方的原因是图像被浮动，因此从正常文档流中取出。
h1
将自身对齐，就好像浮动图像不在那里一样。
h1
被切换的原因是它占用的空间仍然受到尊重，即使它已从正常文档流中移除

我可以提出进一步的建议，一旦我知道所需的布局

编辑1

我可能会用它来解决这个问题


你的头衔在这里

标题{
文本对齐：居中；
位置：相对位置；
}
收割台img{
位置：绝对位置；
排名：0；
左：0；
z-index:1；/*如果存在堆叠问题，请使用此选项*/
}

下面是一个jsFiddle演示上述代码：
我怀疑有什么东西我们没有看到，因为您现有的代码似乎很好，尽管我已经删除了
center
标记，该标记已被弃用并替换为
text align:center

如果它仍然不能集中在完整的HTML中，那么我们需要检查代码的其余部分


标题{
浮动：左；
明确：两者皆有；
宽度：96%；
颜色：#fff；
背景色：#660066；
填充：1%；
左缘：1%；
}
收割台img{
浮动：左；
宽度：12%；
身高：12%；
背景:#660066；
}
收割台h1{
文本对齐：居中；
}

流动猫美容服务
链接上没有图像。检查此项，我认为一切都很顺利，
中心
标记已被弃用，不应再使用。您想水平居中还是垂直居中。@lolka_bolka我上传了它。我想它放在文本旁边，但不要将文本推到右侧。确切地说，一切都在哪里，唯一的问题是它在推动它。你是说因为它是漂浮的？我该怎么做才能解决这个问题呢？我去掉了浮点数，但它得到了相同的结果。结果与A.B的答案相同。请看图片中的问题。提琴起作用了，所以你的代码中一定有其他东西。我已经链接了可能相关的代码的其余部分。我认为最相关的代码的其余部分。你已经更改了原始问题中的代码。图像不再是浮动的，现在有绝对位置。哎呀，对不起，让我把它改回来。新代码看起来很混乱。您的
主体
位于
头部
内，而
h2
位于
主体
外。在任何情况下，
h2
应为不应浮动的
div
。。你真的需要用正确的元素和布局重新开始。我想我只是要删除徽标并做一些调整。明天就要交了，所以不能重新开始。谢谢你的帮助，我会把你的答案记为正确的。
header {
    float: left;
    clear: both;
    width: 96%;
    color: #fff;
    background-color: #660066;
    padding: 1%;
    margin-left: 1%;    
    position:relative;
}
header img {

  width: 12%;  
  height: 12%;  
  background: #660066;
  position:absolute;
  left:0;
  top:0;

 }

<header>
    <img src="Images/catlogo.jpg" alt= "logo"/>
    <h1 class="centerTitle">Mobile Cat Grooming Service</h1>
</header>

centerTitle {
    width: 100%;
    text-align: center;
    margin-left: -12%;
}