HTML, CSS Edit

Question

i wrote some html code and want to edit its view using the css

                <div id="contact_4" name="contact" >
                <input type="checkbox" id="chk_4" class="contactChk"/>
                <img height="25" width="25" alt="" src="Images/Contacts/1.jpg" style="width: 30px; height: 35px;"/>
                <span class="contactItem" id="contactName_4" name="contactName">
                    Amr ElGarhy
                </span>
                <img src="Images/Common/Motiva.png" alt=""/>
                <br/>
            </div>

alt text http://igurr.com/resized-image.ashx/__size/500x400/__key/CommunityServer.Components.PostAttachments/00.00.00.01.73/OneContact.JPG

What i want to do is making the Text and images align vertical in the main div, please if anyone know how to do so without using any tables and just using CSS, and advice me also if i must edit the html itself.

UPDATE: I want everything in the main div t be aligned vertical middle. as you can see in the image that text, checkbox and the 2 images are aligned bottom by default which i want to override.

You'll have to give a better explanation of what youre trying to do — Andrew Bullock
– Andrew Bullock, Commented Feb 22, 2009 at 10:57

Jack Sleight · Accepted Answer · 2009-02-22 11:15:24Z

2

Do this:

#contact_4 * {      
    vertical-align: middle;
    display: inline;
}

The "display: inline;" isn't necessary if you have no other styles changing those elements display types.

P.S. There's no "name" attribute for div and span elements.

answered Feb 22, 2009 at 11:15

Jack Sleight

17.1k6 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amr Elgarhy Over a year ago

Your answer is the simpler while others solutions can apply as well. didn't know that its too easy like that, but sure for experience person ;)

Paulius · Accepted Answer · 2009-02-22 10:58:02Z

0

I'm no guru at CSS, but maybe putting these on all of the elements would help:

margin-top: auto;
margin-bottom: auto;

answered Feb 22, 2009 at 10:58

Paulius

5,8807 gold badges46 silver badges48 bronze badges

Collectives™ on Stack Overflow

HTML, CSS Edit

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related