Question 85868 in ASP.NET Question posted in
The official documentation can be found here.

How I can align a text and a image with bottom-line in HTML? – Asp.net

I run Code A, and get the result Image A.

I hope to align these text and image with bottom-line, just like Image B, how can I do?

Code A

<asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="image" src="Image/edit.png" />
<input type="image" src="Image/save.png" />
<input type="image" src="Image/cancel.png" />

Image A

enter image description here

Image B

enter image description here

Tags:

2

Answers


  1. 0

    The easiest way is to use display: flex. Wrap your tags in an element (such as a <div>) and apply align-items: center.

    Example.

    .example-container {
    display: flex;
    justify-content: center;
}

    <div class="example-container">
    <asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <input type="image" src="Image/edit.png" />
    <input type="image" src="Image/save.png" />
    <input type="image" src="Image/cancel.png" />
</div>

    If you continue to have problems, check that none of your elements have a margin or padding.

    Login or Signup to reply.
  2. 0

    there are two ways to do so:-

    1. use flex property
    .iNeedGf
{
display:flex;
align-items:center;
/*justify content is for horizontal alignment not for vertical alignment just making it clear since the person above have written it wrong*/
}

    <div class='iNeedGf'>
    <asp:Label ID="Label1" runat="server" Text="Label" ></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <input type="image" src="Image/edit.png" />
    <input type="image" src="Image/save.png" />
    <input type="image" src="Image/cancel.png" />
</div>
    1. use relative position
    [type='image']/*this is attribute selector it selects all the elements that have attribute __type__ set to __image__*/
{
position:relative;/*allow you to use left-right-top-bottom properties*/
top:10px;/*change this according to your needs*/
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search