images and text not aligning

[tshad]

In VS 2008, I have in my footer a button, link and 2 images.

But they are not displaying in the vertical middle of the row, even though I
have it set that way:

<asp:Button ID="AddQuestion" Text="Add Question" runat="server"
CommandName="AddRow" CommandArgument="AddRow" style="
vertical-align:middle"></asp:Button>

<div style="vertical-align:middle; text-align:right">

<asp:linkButton id="deselect" visible="true" text="Deselect Row"
CommandName="Deselect" style="vertical-align:middle"
OnClick="DeselectQuestionsRow" runat="server"/>&nbsp;&nbsp;&nbsp;&nbsp;

<asp:ImageButton ID="UpQuestion" visible="true" runat="server"
ImageUrl="~/images/arrowUp.gif" style="height:16px;width:16px;
vertical-align:middle" CommandName="Up" OnClick="moveQuestionRowUp"
AlternateText="^"/>&nbsp;

<asp:ImageButton ID="DownQuestion" visible="true" runat="server"
ImageUrl="images/arrowDown.gif" style="height:16px;width:16px;
vertical-align:middle" CommandName="Down" OnClick="moveQuestionRowDown"
AlternateText="v"/>

</div>

The button is at the top and the others are on the bottom.

Why is that, since I have everthing set to "vertical-align:middle"?

Thanks,

Tom

 

[bruce barker]

you are confusing how the align works with containers and elements. with a
div (a container) an align defines how its content is aligned. with a inline
element like an anchor, its meanless. with a block element (like a button or
image), it specifies how its aligned within the text flow (baseline). so you
have

<input type=button>
<div>
<a>some text</a><img><imagebutton><imagebutton>
</div>

the button goes first. the div is a block content, so it starts on its own
line. the anchor is a flow element, so it defines a baseline, which will be
the highest of the image or text. the images are vertially aligned in the
baseline in the flow. if the div is wide enough there will only be one line.
the extra space on the line goes to the front (right align)


-- bruce (sqlwork.com)