YouTip LogoYouTip

Att Legend Align

## HTML <legend> align Attribute The `` tag defines a caption for the `
` element. Historically, the `align` attribute was used to control the alignment of this caption. --- ## Deprecation Notice > **⚠️ Important:** The `align` attribute for the `` element is **deprecated** in HTML 4.01 and is **not supported in HTML5**. > > Modern web development standards require using **CSS** instead of this attribute to style and align the `` element. Refer to the (#modern-css-alternatives) section below for standard-compliant solutions. --- ## Definition and Usage The `align` attribute specifies the alignment of the legend caption within the surrounding `
`. ### Syntax ```html ``` ### Attribute Values | Value | Description | | :--- | :--- | | `left` | Left-aligns the legend caption (Default). | | `right` | Right-aligns the legend caption. | | `top` | Aligns the legend caption to the top of the fieldset. | | `bottom` | Aligns the legend caption to the bottom of the fieldset. | --- ## Legacy Code Example Below is an example of how the `align` attribute was used in older HTML versions to right-align a legend caption. ```html
Personalia: Name:

Email:

Date of birth:
``` --- ## Browser Support * **`left` and `right` values:** Supported by Internet Explorer, Firefox, Chrome, and Safari. Opera has historically had limited support. * **`bottom` value:** Almost no major modern browsers support the `bottom` alignment value via this attribute. --- ## Modern CSS Alternatives To align the `` element in modern web development, you should use CSS. This ensures your code is HTML5-compliant, accessible, and consistent across all modern browsers. ### 1. Aligning Legend to the Right (Standard CSS) You can use the CSS `text-align` property on the `
` or float/margin properties on the `` to achieve the desired alignment. ```html Modern Legend Alignment
Personalia:



``` ### 2. Aligning Legend to the Center To center the legend caption, you can use `margin: 0 auto;` or `text-align: center;` depending on your layout requirements: ```css legend { margin-left: auto; margin-right: auto; padding: 0 10px; } ```
← Att Li TypeAtt Label Form β†’