By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,490 Members | 3,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,490 IT Pros & Developers. It's quick & easy.

images and text not aligning

P: n/a
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
Sep 16 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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)
"tshad" wrote:
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"/>

<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="^"/>

<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
Sep 16 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.