Html 将固定宽度div中居中的文本与图像对齐

我有一个

包含图像和一些文本。图像应该位于左角，文本应该位于

的中心。但由于图像的宽度，文本向右偏中心。 我怎么修理它

<header>
<img id="searchBoxProp" src="/resources/images/searchBoxProp.png">
<div class="title">RECIPE SEARCH</div>
</header>


header #searchBoxProp { margin: -16px 0 0 2px; width: 43px; float: left; }
header .title { text-align: center; margin-left: 0 auto; }

配方搜索
标题#searchBoxProp{边距：-16px 0 0 2px；宽度：43px；浮动：左；}
header.title{文本对齐：居中；左边距：0自动；}

将

标题

设置为

位置：相对

，将

#searchBoxProp

设置为

位置：绝对

。绝对定位将元素移出布局，因此不会影响文本位置。页眉上的相对定位可确保

#searchBoxProp

相对于

页眉而不是浏览器窗口定位

header {
    position:relative;
}
#searchBoxProp {
    position:absolute;
    left:0px; /* set to your needs */
    top:0px; /* set to your needs */
}

将
标题
设置为
位置：相对
，将
#searchBoxProp
设置为
位置：绝对
。绝对定位将元素移出布局，因此不会影响文本位置。页眉上的相对定位可确保
#searchBoxProp
相对于
页眉而不是浏览器窗口定位

header {
    position:relative;
}
#searchBoxProp {
    position:absolute;
    left:0px; /* set to your needs */
    top:0px; /* set to your needs */
}

您可以将图像设置为
的背景，然后设置
文本对齐：居中
，以便正确对齐文本

HTML可以是：

<header>
   <div class="title">RECIPE SEARCH</div>
</header>

您还需要设置一个固定的高度（等于图像），最后设置所需的宽度。
您可以将图像设置为
的背景，然后设置
文本对齐：居中，以便正确对齐文本

HTML可以是：

<header>
   <div class="title">RECIPE SEARCH</div>
</header>

您还需要设置一个固定的高度（等于图像），并最终设置所需的宽度。
最佳做法是使用背景图像，但如果没有，您可以像这样使用位置绝对值

header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }

最好的做法是使用背景图像，但如果不是，可以像这样使用位置绝对值

header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }

+我自己也应该想到这一点：-）因为图像需要在标题的左上角，我将背景设置在标题上，并且不添加重复+位置…是的，我忘记了。谢谢：）当有人决定使用背景而不是争论时，我总是很高兴：）+1我自己应该想到这一点：-）因为图像需要在标题的左上角，所以我将背景设置在标题上，并且不添加重复+位置……是的，我忘记了。谢谢：）当有人决定使用背景而不是争论时，大家都很高兴：）最好设置太100%的宽度，然后将文本居中，这样你就不必定义左边，如果父容器被更改，它将自动更改。@DominicGreen OP提到图像必须位于
左上角
-因此我认为这是他想要位于左上角位置的图标，而不是全宽背景。最好设置太宽，然后将文本居中，这样就不必定义“左”，如果父容器被更改，它将自动更改。@DominicGreen OP提到图像必须位于
左上角
——因此我认为它是他想要位于左上角的图标，而不是全宽背景。