Question

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

Answer 1

你有几个选择。您将需要使用图像大小的div并将其居中。然后，您可以将图片设置为该div的背景，或者您可以创建div position: 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/

Answer 2

编辑：

由于您希望文本覆盖，您可以在包装元素上使用position: relative并在内部元素上使用position: absolute。只要包装元素具有width和height;

，这允许您在包装元素内定位

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

来自先前答案的无关紧要文本：可能使用text-align: center的东西 http://jsfiddle.net/FcBmd/

Answer 3

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

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

Answer 4

您可以尝试使用padding。

Answer 5

试试这个：

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;
}

Demo

Answer 6

好问题。

基本上你说的是距离顶部多远以及距离多远。

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

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

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

相对于图像位置定位文本

6 个答案: