0

基本上，图像居中（我不能使用绝对定位，因为每个人都有不同的屏幕分辨率并且图像居中），我希望我的文本从顶部向下 20 像素，从左侧向右 10 像素。我该怎么做 ？我已经搜索过但一无所获。可能是因为我的打字。

4

6 回答 6

1

你有几个选择。您将需要使用图像大小的 div 并将其居中。然后您可以将图像设置为该 div 的背景，或者您可以制作 divposition: relative并添加一个<img>绝对定位的标签。

这是第一种方法的示例。

HTML：

<div id="imageContainer">
    Some text that's overlaying the image.
</div>

CSS：

#imageContainer {
    width: 275px;
    height: 95px;
    background: url('https://www.google.com/images/srpr/logo4w.png');
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 20px 0 0 10px;
}

还有一个 JSFiddle 来展示它的工作原理：http: //jsfiddle.net/VD34W/

于 2013-06-11T13:29:02.333 回答
0

尝试这个：

HTML

<div id="theDiv">
    <p>Some text here</p>
</div>

CSS

#theDiv {
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvT90hfqXnsPUsrySmYtU2Hj1ypEwCq0muzSCKdxOSmUnZqp_Z);
    width: 300px;
    height: 300px;
}

#theDiv p {
    padding-top: 20px;
    padding-left: 10px;
}

演示

于 2013-06-11T13:21:11.873 回答
0

好问题。

基本上你说从顶部向下多远，向左多远。

position:relative;
left:10px;
top:-20

提示：将图片和文本都放在一个 div 中，以便文本相对于 div。

也结帐： http ://www.w3schools.com/css/css_positioning.asp

于 2013-06-11T13:21:50.813 回答
0

编辑：

position: relative由于您希望文本被覆盖，您可以在包装元素和position: absolute内部元素上使用 hack 。这允许您在包装元素内定位，只要包装元素具有widthand height;

http://jsfiddle.net/FcBmd/1/

上一个答案中的无关文本：可能使用text-align: center http://jsfiddle.net/FcBmd/

于 2013-06-11T13:17:22.113 回答
0

看看这个：http ://css-tricks.com/float-center/ 。

基本上只能左右对齐，但你可以“以某种方式”伪造它。

于 2013-06-11T13:17:40.473 回答
0

您可以尝试使用padding.

于 2013-06-11T13:19:17.787 回答