Css позиционирование без фонового изображения

-1

У меня возникла проблема с позиционированием текста в верхней части изображения. Изображение не находится в фоновом режиме. Это только с тегом изображения.Css позиционирование без фонового изображения

Дело в том, что я не могу изменить код html. Можно ли достичь того, чего я хочу, но не меняя html-код.

<div class="home_box"> 
<img src="http://netdna.seospecialist.co.uk/wp-content/uploads/2012/12/christmas-three.png" class="holding"> 
<h4>hot off the server</h4> 
</div>

Jsfiddle: http://jsfiddle.net/EkzdE/11/

Я обновил скрипку. Теперь при изменении размера окна изображение движется, но текст гостит there.Is там какой-нибудь способ сделать это отзывчивым

источник

2013-12-18 Prithviraj Mitra

вы не должны делать серьезные изменения в вопросы половины, как люди начали отвечать на него. Это раздражает и снижает качество ответа. –

Извините за это. Фактически, когда я изменил размер браузера, внезапно возникла чувствительная вещь. –

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

CSS:

.home_box { 
    position:relative; 
    text-align:center; 
} 
img.holding { 
    position:relative; 
    margin-top:40px; 
} 
.home_box h4 { 
    color: #000; 
    font-family:'arial'; 
    font-size: 15px; 
    left: 140px; 
    line-height: 33px; 
    position: absolute; 
    text-align: center; 
    text-transform: uppercase; 
    width: 200px; 
    height:40px; 
    left:50%; 
    top:0; 
    margin-left:-100px; 
}

источник

2013-12-18 18:15:29

Спасибо. Я обновил свою скрипку и этот вопрос. –

для отзывчивого дизайна см. Эту скрипту: http://jsfiddle.net/EkzdE/12/ –

Фактически в моем коде изображение уменьшается при изменении размера браузера. Поэтому, когда изображение становится короче, текст не идет с ним. –

Запись:

.home_box h4 { 
    width: 200px; 
    top:0;margin:0; 
}

Updated fiddle here.

источник

2013-12-18 18:14:26 Hiral

Спасибо Хираль. Я обновил свою скрипку и этот вопрос. –

@ PrithvirajMitra вопрос непонятен. пожалуйста, уточните – Hiral

При изменении размера браузера изображение перемещается из центра влево, но не из текста. Пожалуйста, проверьте мою последнюю скрипту, размещенную в вопросе. –

Все, что вам нужно сделать, это установить верхнее свойство элемента h4 равным нулю, чтобы оно находилось в верхней части div, прямо над изображением.

.home_box h4 { 
    ... 
    left: 0; 
    top: 0; 
    ...

}

Here is an updated fiddle.

источник

2013-12-18 18:18:56 0xcaff

Спасибо. Я обновил свою скрипку и этот вопрос. –

@PrithvirajMitra Мой отзыв отзывчив, правильно? – 0xcaff

Вы должны сделать позиционирование как на изображении, и текст relative.

Это гарантирует, что они перемещаются в соответствии с div при изменении размера окна.

Для того, чтобы текст высветить целиком, используйте отрицательный верхний край.

.home_box { 
    position:relative; 
    text-align:center; 
} 
img.holding { 
    position:relative; 
} 
.home_box h4 { 
    color: #000; 
    font-family:'arial'; 
    font-size: 15px; 
    margin-top: -200px; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: 33px; 
    position: relative; 
    text-align: center; 
    text-transform: uppercase; 
    width: 200px; 
}

Updated Fiddle

источник

2013-12-18 18:41:56 AnthonyM

Css позиционирование без фонового изображения

ответ

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