我有<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; }
答案 0 :(得分:2)
您可以将图片设置为<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;
}
您还需要设置固定高度(等于图像),最后设置您想要的宽度。
答案 1 :(得分:1)
将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 */
}
答案 2 :(得分:0)
最佳做法是使用背景图像,但如果不是,你可以像这样使用位置绝对值。
header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }