How to put middle text in my image

HTML & CSS
1

Hi, can i ask some help how can i align the text to middle in my image ?


   <div class="myclass">

       <h1>Hello world <img src="myimage.png"></h1>
    </div>

Thank you in advance.

2

“Middle” is a bit vague. If you mean vertical centering the image and text, try this:

img {vertical-align: middle;}
3

If you want the text over the face of the image, this seems to work fairly well.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text over Image</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1205129-How-to-put-middle-text-in-my-image
2014.04.13 10:32
jemz
-->
    <style type="text/css">
.myclass {
    outline:1px solid magenta;    /* TEST Outline */
    display:table;    /* inline-block, or block, or table */
    text-align:center;
    margin:0 auto;
}
h1 {
    margin:0;
}
h1 img {
    vertical-align:middle;
}
h1 span {
    display:inline-block;
    vertical-align:middle;
    width:320px;    /* same as width of image */
    margin-left:-320px;
}

    </style>
</head>
<body>

<div class="myclass">
    <h1><img src="http://placehold.it/320x260" alt="" width="320" height="260"><span>Hello world, HELLO!</span></h1>
</div>

</body>
</html>
4

Hi @ralph,@ronpat,…Thank you so much it works.

5

Using CSS you can try to centre some text on an image,

div     {
    width:32px;
    height:21px;
    padding-top:11px;
    text-align:centre;
    font-size:10px;
    background:url(yourImageURL) no-repeat;
}