How to place a text over image

[newcoder1010]

Hi,

 

I have this html. I like to put the text "one" on top of the image as shown in the picture. Can you please help me?

<div class="content">
    <div class="field field-name-field-productimage field-type-linkimagefield field-label-above">
 
    <a href="https://www.drupal.org/project/field_collection" title="" target="_self" rel="" class="">
    <img typeof="foaf:Image" class="img-responsive" src="usiness-website_0.png" width="209" height="144" alt=""></a></div>
    
    <div class="field field-name-field-companyname field-type-text field-label-above">
    
    <div class="field-item even">one</div>
    </div>
    

 </div>

[dsonesuk]

Could involve

option 1

position: relative, position: absolute; top: left properties.

 

option 2

margin-top with negative value, text-align: center;

 

Either options could work, but depends what other styling is already applied to other elements, so cannot supply definite solution.

[Yvzslm]

I'm not sure It will work correctly. I hope this is what you want:

https://jsfiddle.net/rnky9yL3/1/