We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

vertical align text in the middle next to an image

TrialUser
TrialUser asked
on
Medium Priority
377 Views
Last Modified: 2012-08-13
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

Comment
Watch Question

Greg AlexanderLead Developer

Commented:
You wanting the text under the image but in the middle?
CERTIFIED EXPERT
Top Expert 2015

Commented:
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

Philippe DamervalSenior Analyst Programmer

Commented:
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?
Philippe DamervalSenior Analyst Programmer

Commented:
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
Consultant
CERTIFIED EXPERT
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

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
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.