In HTML, the align attribute is used to control the alignment of elements on a webpage. Whether it's for text, images, or tables, the align attribute helps to position content in relation to its surrounding elements.
Syntax
<element_name align="left | right | center | justify">
Attribute Values
Attribute Values | Description |
|---|
left | It sets the text left-align. |
|---|
right | It sets the text right-align. |
|---|
center | It sets the text center-align. |
|---|
justify | It stretches the text of a paragraph to set the width of all lines equal. |
|---|
This example shows the use of the align attribute.
html
<html>
<head>
<title>
HTML p align Attribute
</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML p align Attribute</h2>
<p align="left">
Left align content
</p>
<p align="center">
center align content
</p>
<p align="right">
Right align content
</p>
</body>
</html>
Output:
Note: The align attribute is deprecated in HTML5, and styles should be used via CSS for better practices.
Using CSS for Alignment
While the align attribute is still supported in many browsers, CSS has become the preferred way to align elements in modern web development. Using CSS gives you more flexibility and control over your webpage layout.
1. Aligning Text with CSS
In modern web development, CSS is the preferred method for aligning text. The text-align property is used to control the alignment of text within an element. We can use this property to align text to the left, right, center, or justify it across the width of the container.
Syntax
text-align: left | center | right | justify;
- left: Aligns the text to the left (default for most elements).
- center: Aligns the text to the center of its container.
- right: Aligns the text to the right.
- justify: Stretches the text to align with both the left and right margins, ensuring that each line has the same width.
2. Aligning Images with CSS
Aligning images using CSS is a common practice in modern web design. We can use CSS to position images within their containers, and there are several methods for aligning images to the left, right, or center of the page or parent container.
Syntax
img {
display: block | inline-block | inline;
margin-left: auto;
margin-right: auto;
}- display: block;: Makes the image behave like a block element, which is necessary for centering.
- margin-left: auto; margin-right: auto;: Automatically adjusts the left and right margins to center the image.
- float: left;: Aligns the image to the left, allowing text to flow around it.
- float: right;: Aligns the image to the right, allowing text to wrap around it.
3. Aligning Tables with CSS
Aligning tables in CSS is straightforward and gives you control over how the entire table or individual cells are positioned within their containers. We can use the margin, text-align, and justify-content properties to adjust the table's position.
Syntax
table {
margin-left: auto;
margin-right: auto;
text-align: center | left | right;
}- margin-left: auto; margin-right: auto;: Centers the table horizontally within its parent container.
- text-align: center | left | right;: Aligns the content of the table cells.
- display: flex; justify-content: center;: Centers the entire table in a flex container.
Browser Support
Similar Reads
HTML accept Attribute HTML accept Attribute specifies the type of file that the server accepts. This attribute can be used with <input> element only. This attribute is not used for validation tools because file uploads should be validated on the Server.Syntax:<input accept = "file_extension"> Note: This attri
3 min read
HTML accept-charset Attribute The accept-charset attribute is used to define the character encoding and is used for form submission. The default value of the accept-charset attribute is "UNKNOWN" string which indicates the encoding equals to the encoding of the document containing the <form> element. Syntax:<form accept
2 min read
HTML accesskey Attribute The HTML accesskey attribute defines a keyboard shortcut to activate or focus an element.It assigns a keyboard key combination to trigger an element (like a link or button).Browser support and specific key combinations vary (e.g., Alt + key on Windows, Ctrl + key on macOS).Use it sparingly and provi
3 min read
HTML action Attribute The HTML action attribute is used to specify where the form data should be sent on submission. It allows the browser to send the data to the specified location, enabling server-side scripts to process the data and generate a response.Note: It can be used in the <form> element. Syntax:<form
3 min read
HTML align Attribute In HTML, the align attribute is used to control the alignment of elements on a webpage. Whether it's for text, images, or tables, the align attribute helps to position content in relation to its surrounding elements.Syntax<element_name align="left | right | center | justify">Attribute ValuesAt
4 min read
HTML alt attribute The alt attribute in HTML provides alternative text for images, aiding accessibility and providing context for screen readers.Syntax:<img src=" " alt=" " >HTML<html> <body> <h1>GeeksforGeeks Logo</h1> <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190
3 min read
HTML async Attribute The HTML <script> async attribute is used to load and execute external scripts without blocking the rest of the page from loading. This speeds up page load times. It only works with external scripts (when the src attribute is present).Syntax:<script src="path-to-script.js" async></scr
3 min read
HTML autocomplete Attribute The HTML autocomplete Attribute is used to specify whether the input field autocompleted would be on or off. When the autocomplete attribute is set to on the browser will automatically complete the values based on what the user entered before. It works with input fields such as text, search, URL, em
3 min read
HTML autoplay Attribute The HTML autoplay Attribute, a boolean attribute, enables audio or video elements to start playing automatically when the page loads, providing seamless playback without interruption.Syntax: <element autoplay> Supported ElementsIt can be used with <audio> and <video> elements. Elem
2 min read
HTML autofocus Attribute The HTML autofocus attribute is a powerful tool that enhances user experience by automatically setting the focus to a specific element when a webpage loads. Syntax<input type="text" autofocus> Note: This attribute is boolean, meaning it can either be present or absent.Supported TagsElementPurp
2 min read