#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2008
    Posts
    26
    Rep Power
    0

    Text on top of the image


    Hi I have image, and I need to have text overlayed;

    I managed to do this using this code:

    PHP Code:
    <div style="position:absolute;top:100px; margin-left: 50px; font-size: 24px; color:white"><p style ="width:166px; text-align: center;" font-size24px;> 
    URL: http://poigraika-prokat.ru/index.php?cPath=26

    But no matter what I do, I can not align text properly in the middle. It always shifts left/right denending on the text actual size;

    I have tried margin-left:auto and margin-right:auto and dozens of other combinations.

    Is it possible to have good clean centered text, when it overlays the image?
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2014
    Posts
    29
    Rep Power
    0
    Are the image widths always going to be known, as in the example you link to?

    If so, does this work for you?

    HTML:
    Code:
    <div class="text-image-container">
        <img src="dummy.jpg" class="text-image-image" width="176" height="277"/>
        <p class="text-image-text">alpha beta gamma delta</p>
    </div>
    and CSS:
    Code:
    .text-image-container {
        position: relative;
    }
    
    .text-image-text {
        position: absolute;
        width: 176px;
        text-align: center;
        top: 50%;
        left: 0;
    }
    It requires that the image width be known in the CSS, so it's not a general-purpose solution, but if you have known image-widths it might work for you.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    67
    Rep Power
    0
    It's a little messy, and the inline styles you have aren't making it any easier.

    What if you increase the padding on...

    .contentText table td

    so its right against the edge of your blue square. Then you don't need to worry about margins and div's inside there, you can just center it.

    And remove the <br />'s and <p>'s that you have in there to create spacing. Just try to use paddings and margins if you can.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2014
    Location
    San Joes
    Posts
    1
    Rep Power
    0

    Placing text on top of the image


    Its may be done by using position:absolute and z-index to place the text over the image.

    <div id="container">
    <img id="image" src="/image_gallery/images/d4/androa.jpg"/>
    <p id="text">
    Hello World!
    </p>
    </div>

    #container
    {
    height:400px;
    width:400px;
    position:relative;
    }

    #image
    {
    position:absolute;
    left:0;
    top:0;
    }
    #text
    {
    z-index:100;
    position:absolute;
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
    }

IMN logo majestic logo threadwatch logo seochat tools logo