Is there a way to align text and an image with the bottom line in HTML?

After running Code A, I am presented with Image A as the result.

I am looking to align this text and image at the bottom line, similar to how it appears in Image B. How can I achieve this alignment?

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

Resulting Image A

https://i.sstatic.net/pvgOQ.png

Reference Image B

https://i.sstatic.net/ec7lc.png

htmlcssasp.net

Answer №1

There are a couple of methods to achieve this:

  1. Utilize the flex property
.iNeedGf
{
display:flex;
align-items:center;
/*justify content is for horizontal alignment, not for vertical alignment. Just clarifying since the previous explanation was inaccurate*/
}

<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. Implement relative positioning
[type='image']/*this is an attribute selector that selects all elements with attribute __type__ set to __image__*/
{
position:relative;/*allows you to use left, right, top, and bottom properties*/
top:10px;/*adjust this based on your requirements*/
}

Answer №2

To easily align items, consider using the display: flex property. Simply wrap your elements within a container element (like a <div>) and add align-items: center.

For 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 are still experiencing issues, ensure that none of your elements have unnecessary margin or padding applied.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring MVC 5's View and Controller Components

In my GetCourseList.cshtml file (view), I have the following code that displays fetched information from the database: @model IEnumerable<WebApplication8.Models.Courses> @{ Layout = null; } <!DOCTYPE html> <html> <head> ...

javascripthtmlasp.net-mvcmodel-view-controllerrazor

Is using PasswordFormat.Encrypted considered a secure option for the Asp.Net membership provider?

After utilizing the membership provider on my website successfully for years, I recently revisited it and found myself contemplating the password format option. While I still require users to be able to reset their password, the need for password retrieval ...

asp.netsecurityasp.net-membershipforms-authenticationmembership-provider

Encountering blank space in the first table row after a page break when creating a PDF using dompdf

Encountered a strange bug while working with dompdf for PDF generation. The issue arises when a page break occurs within a table. Subsequent to the break, the first tr on the next page displays an odd empty space on the left side (as depicted in the image ...

phphtmlcsspdfdompdf

Confirming user credentials for every page

I am currently working with an HTML page that includes front end PHP for server side scripting. One issue I have encountered is the configuration page, which can be accessed by disabling JavaScript in Mozilla settings. My current validation method relies ...

phpjavascripthtml

Guide to incorporating Ember into an existing HTML file

Planning to integrate Ember 2.0 into an existing HTML page and have a few queries regarding this. Is it necessary to build the ember project beforehand? This results in creating appname.js and vendor.js files. Which js files are essential to be included ...

javascripthtmlember.js

Issues with HTML5 video playback in Apple machines using the Firefox browser

On a website I'm developing, I've included an HTML5 video that works perfectly except for one specific issue - it won't play on Firefox in Apple devices. Surprisingly, it functions well on all other browsers and even on Firefox in Windows an ...

javascriptioshtmlfirefoxvideo

Tips on looping through a universal array and retrieving user input

My current project involves creating a news site using the Guardian API. I want to implement a search feature that allows users to input keywords and retrieve the webTitle attribute for matching elements. While I could simply insert the user input directly ...

jqueryhtmlarraysajax

Div's HTML Classes are not triggering the Click Event

I'm attempting to create a custom function that will display notifications in the top right corner of my website, similar to how OS X notifications appear. Instead of relying on an external library, I am using jQuery as a resource. To house my notifi ...

jqueryhtmlonclicknotifications

Validation of HTML5 forms for AJAX button submission

I am working with a form that utilizes the new HTML5 form validation feature, which I find to be beneficial. However, I do not like how pressing the button causes the page to refresh (form submit). Instead, I would like to use AJAX to update specific page ...

jqueryhtmlforms

Get the username from Parse instead of using the ObjectID

When using angular and Parse for JavaScript, I have implemented a search field where an admin can input the objectid of a user to display their details. However, I would like to modify this functionality so that the admin can enter the username instead of ...

javascriptjqueryhtmlangularjsparse-platform

Printing iframe does not display CSS effects

As I work on developing a program that involves the use of iframes, I have encountered an issue with CSS effects not appearing when trying to print the iframe. Despite applying CSS successfully in browsers like IE, Chrome, Mozilla, and Edge, the printed ou ...

javascriptphpcssajaxiframe

What is causing the parse error in my CSS code?

Running into a parse error on line 314 of my css (style.css). The error is "} expected css(css-rcurlyexpected)". Even after adding the necessary curly brace, it still doesn't validate. Below is my CSS starting from line 314 till the end: /* CSS code ...

css

Designing a fresh look for the developer portal on Azure API Management Services

Is there a way to customize the color of the navbar links in the fresh developer portal for different layouts? I have attempted using the designer tool provided by the portal, but it hasn't yielded any results. I also tried cloning the git repository ...

cssazureazure-api-management

IE11 React application cannot recognize the <main> tag

When using my React application, I encountered the following error message in the dev console while using IE11: Warning: The tag <main> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase let ...

reactjshtmlinternet-explorer-11

Applying a CSS class to a newly generated row with JavaScript

I have a JSP page where I dynamically add rows to a table using a different Javascript function than in my previous query. While I can add elements to the table columns, I'm unable to apply a style class that is defined in a CSS file. Here is my Java ...

javascripthtmlcss

The d3.select function is failing to update the chart on the website

I am facing a challenge in updating data in a d3 chart with the click on an HTML object #id. After successfully coding it in jsfiddle, I encountered issues when implementing it on a web page. The scenario involves a simple leaflet map where the chart is d ...

javascriptjqueryhtmld3.js

Divide the bootstrap form from the outcome

I am in the process of developing a basic web application using Bootstrap that involves taking user input on a form, sending it to a database, and then displaying the data in a table below the form. The main challenge I am facing relates to the styling asp ...

htmlcssformsbootstrap-4

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...

javascripthtmlcssangularjs

Creating a dynamic slideshow using Jquery Ajax requests

I am looking for help with creating a slideshow using Ajax calls. I have successfully implemented it by adjusting the margin left, but now I need to approach it differently. I have a PHP array that I fetched from a database and I want to use it to display ...

javascriptphpjqueryhtmlajax

What is the best way to store and retrieve data from the current webpage using HTML, CSS, and JavaScript?

Is there a way to persistently save the button created by the user even when the browser is refreshed? Here is an example code snippet: function create(){ const a = document.createElement("button") document.body.appendChild(a) const b = documen ...

javascripthtml