RE: images and text not aligning

Tech-Archive recommends: Repair Windows Errors & Optimize Windows Performance



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



.



Relevant Pages

  • Re: display:inline block elements
    ... CES wrote: ... Within the row their is a <Div> that I want to align to the Right hand side of the <Div ... Align is not a valid attribute of the Div element... ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: display:inline block elements
    ... I was hoping that someone might be able to help me with a few questions on Aligning Block Elements properly... ... Within the row their is a <Div> that I want to align to the Right hand side of the <Div ... Align is not a valid attribute of the Div element... ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Vertical align of image in a div tag
    ... that I can align things correctly. ... The li1 tag is supposed to align ... Anyone know how to align the image vertically in the middle of the div ...
    (alt.html)
  • Re: display:inline block elements
    ... On 2006-07-09, CES wrote: ... their is a <Div> that I want to align to the Right hand side of the <Div ... Align is not a valid attribute of the Div element... ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: how to line up divs?
    ... thought that by adding a div under each video clip div I could put the ... What you have here is a linear sequence of containers (currently 4 of ... language generator for that same code. ...
    (comp.infosystems.www.authoring.html)