How to center the element – what to use instead of align:center attribute?

by

Assuming your markup looks something similar to this:

<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

Your CSS should look something like this:

legend {
    margin:0 auto;
}

that’s easiest

Oh Dear… You have chosen probably the most difficult thing in CSS when it comes to cross-browser compatibility. Cameron Adams said it best

Probably the only difficulty in
styling semantic forms is the legend
tag. It is insufferably variable
across browsers. In Mozilla, the
legend tag is not left-indented from
the body of the fieldset, in IE and
Opera it is. In Mozilla, the legend
tag is positioned in between the
fieldset’s border and its content, in
IE and Opera it is positioned inside
the content. This makes it very hard
to move the legend inside the fieldset
border, or position it flush to the
left of the fieldset, as you get
varying effects across browsers

You can read more about what he said at Fancy Form Design Using CSS on how to style forms.

My solution to the problem would be to remove the fieldset border completely and absolutely position the legend element. The problem with what you want to do is that it is different in every browser.

More Related Contents:

  1. Browser is not displaying images
  2. Why is there an unexplainable gap between these inline-block div elements? [duplicate]
  3. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  4. How to modify the fill color of an SVG image when being served as background image?
  5. Make flex items take content width, not width of parent container
  6. Is element block level or inline level?
  7. Style input type file? [duplicate]
  8. Maintain the aspect ratio of a div with CSS
  9. How do I give text or an image a transparent background using CSS?
  10. How to display scroll bar onto a html table
  11. Why can’t I center with margin: 0 auto?
  12. How to apply CSS page-break to print a table with lots of rows?
  13. How to determine height of content-box of a block and inline element
  14. Remove default text/placeholder present in html5 input element of type=date
  15. issue with CSS media queries(scrollbar)
  16. CSS: Workaround to backdrop-filter?
  17. Inspect webkit-input-placeholder with developer tools
  18. How to create a curved speech bubble?
  19. Make an image width 100% of parent div, but not bigger than its own width
  20. How to center cards in bootstrap 4?
  21. Create line numbers on pre with CSS only
  22. HTML Div border not showing
  23. How do I assign multiple classes to one HTML element? [closed]
  24. How to center horizontally and vertically?
  25. How to change the text color of first select option
  26. Attaching a SCSS to HTML docs [closed]
  27. How to use nth-child for styling with a table with rowspan?
  28. What does the question mark at then end of a css include url do?
  29. How to create a tooltip? [duplicate]
  30. How to hover only the current li in nested ul?

Leave a Comment