vertical align text in the middle next to an image

I have a div containing an image and some text next to it. How can I make sure that the text will vertically aligned in the centre of the image.

In the attached code I would like this to be in center of the image vertically.  I tried adding style="vertical-align:middle;" but doesnt seem to help. Please help thanks

<span>Some text next to image</span>

<div id="divSomething" class="dcssDiv">
<a href="/someurl">                                    <img alt='Text' src="/T027201_1_1.JPG" style="width:30px;height:30px;border:none;" />
<span>Some text next to image</span>
                          
                                </a>                                                               
                            
</div>

Open in new window

TrialUserAsked:
Who is Participating?
 
Rajar AhmedConsultantCommented:
Try this ..
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="valign-center.aspx.vb" Inherits="valign_center" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Valign Center</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="divSomething" style="display:block">
        <a href="/someurl">
            <img style="width:100px;height:100px;vertical-align:middle;border:0px" src="http://neodynamic.com/Support/FAQs/59/AspNetBarcodeClientSidePrinting.gif">
            <span style="">Works.</span>
        </a>                                                               
    </div>
   
    </div>
    </form>
</body>
</html>

Open in new window

0
 
Greg AlexanderLead DeveloperCommented:
You wanting the text under the image but in the middle?
0
 
Tom BeckCommented:
As I understand it, you want the text to the right and centered vertically along the height of the image. Just adjust the margin-top to get the text where you want it exactly.
<div id="divSomething" class="dcssDiv">
        <a href="/someurl"><img alt='Text' src="/T027201_1_1.JPG" style="float:left;width:30px;height:30px;border:none;" />
        <span style="float:left;margin-top:12px;">Some text next to image</span></a>                     
    </div>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Philippe DamervalSenior Analyst ProgrammerCommented:
Have you considered making a div to the dimensions of your image, setting the image as its background, and specifying vertical align for the Div's inner html?
0
 
Philippe DamervalSenior Analyst ProgrammerCommented:
Something like this:


        <div style="height:310px;width:420px;display:table-cell;vertical-align:middle;background-image:url('http://whitenoisecd.org/wp-content/themes/thesis/rotator/sample-4.jpg');text-align:center;">
        <h1>Centered vertically!</h1>
        </div>


HTH,

Philippe
0
 
TrialUserAuthor Commented:
Thanks a lot for your sugesstions. I tried all of them. surprisingly, I could not get any of the styles applied on the div or on the span to make it work like what I want. The vertical-align on the image itself as per meeran's idea solved my issue. The text is not vertically-aligned to the middle in the right of the image.

Thanks a for all the help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.