?
Solved

vertical align text in the middle next to an image

Posted on 2011-04-22
6
Medium Priority
?
362 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

0
Comment
Question by:TrialUser
6 Comments
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35450342
You wanting the text under the image but in the middle?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35450362
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
 
LVL 9

Expert Comment

by:Philippe Damerval
ID: 35450978
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 9

Expert Comment

by:Philippe Damerval
ID: 35451111
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
 
LVL 18

Accepted Solution

by:
Rajar Ahmed earned 2000 total points
ID: 35451791
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
 

Author Comment

by:TrialUser
ID: 35456778
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

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question