Question

我有<div>包含图片和一些文字。图像应该位于左角，文本应该位于<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; }

Answer 1

您可以将图片设置为<div class="title">的背景，然后设置text-align:center以便正确对齐文字。

HTML可能只是：

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

CSS：

div.title { 
   background-image:url('/resources/images/searchBoxProp.png');
   background-repeat:no-repeat;
   text-align:center;
}

您还需要设置固定高度（等于图像），最后设置您想要的宽度。

Answer 2

将header设为position:relative，将#searchBoxProp设为position:absolute。绝对定位将元素排除在布局之外，因此不会影响文本位置。标头上的相对定位可确保#searchBoxProp相对于header而不是浏览器窗口定位。

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

Answer 3

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

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

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

3 个答案: