Позиционирование текста относительно позиции изображения

В принципе, изображение центрировано (я не могу использовать абсолютное позиционирование, потому что у всех разные разрешения экрана, а изображение сосредоточено), и я хочу, чтобы мой текст был 20 пикселей вниз и 10 пикселей справа слева , Как мне это сделать ? Я искал, но ничего не получил. Возможно, из-за моего ввода.Позиционирование текста относительно позиции изображения

источник

2013-06-11 purplecircles

Вы хотите, чтобы ваш текст наложить на изображение? Вы хотите, чтобы текст начинался с 20 пикселей вниз от верхней части страницы? Или со дна изображения?И 10 пикселей с левой стороны страницы или с левой стороны изображения? – theJoeBiz

Наложение изображения. от верхней части изображения. все относительно изображения. (как в 10 пикселах слева от угла изображения) – purplecircles

Отредактировал мой ответ из-за новой информации от вас. Посмотрите, помогает ли это. – pandavenger

Edit:

Так как вы хотите, чтобы текст, который будет перекрывать вы можете использовать хак с помощью position: relative на элементе оберточной и position: absolute на внутренних. Это позволяет размещать внутри оберточного элемента до тех пор, пока оберточный элемент имеет width и height;

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

Irrelavent Текст из ответа на предыдущий вопрос: Что-то, может быть, с помощью text-align: center http://jsfiddle.net/FcBmd/

источник

2013-06-11 13:17:22 pandavenger

Я не вижу, как это помогает, поскольку в этом случае текст не может быть оверлейным. – purplecircles

Я не видел его комментария, но есть эта вещь, называемая «позиция: относительная», которую вы видите =) – pandavenger

Взгляните на это: http://css-tricks.com/float-center/.

В основном это можно выровнять только влево и вправо, но вы можете «каким-то образом» подделать его.

источник

2013-06-11 13:17:40

Вы можете попробовать использовать padding.

источник

2013-06-11 13:19:17 DaftDev

Попробуйте это:

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

источник

2013-06-11 13:21:11

, когда вы центрируете все, paddings не имеет значения – purplecircles

да, но я только что дал решение вашей проблемы, чтобы переместить текст на 20 пикселей и вправо 10px! –

Хороший вопрос.

В основном вы говорите, как далеко от вершины и как далеко осталось.

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

Совет: поместите как изображение, так и текст внутри div так, чтобы текст был относительно div.

Также фотографии: http://www.w3schools.com/css/css_positioning.asp

источник

2013-06-11 13:21:50

У вас есть несколько вариантов. Вам нужно будет использовать 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/

источник

2013-06-11 13:29:02 theJoeBiz

Позиционирование текста относительно позиции изображения

ответ

Смежные вопросы