0

For a HTML code (here based on Thymeleaf)

 <body>
        <form th:object="${book}">
            <fieldset>
            <legend>Book</legend>
            <table>
                <tr>
                    <td><label for="id">Id:</label></td>
                    <td><input th:id="id"
                               th:readonly="readonly"
                               th:size="50"
                               th:type="text"
                               th:value="*{id}"></td>
                </tr>
                <tr>
                    <td><label for="title">Title:</label></td>
                    <td><input th:id="title"
                               th:readonly="readonly"
                               th:size="50"
                               th:type="text"
                               th:value="*{title}"></td>
                </tr>

I found this post:

Thus is used:

body {
    text-align: center;
}

form {
    display: inline-block;
}

Here the purpose is have the form in the center of the page:

The result is:

enter image description here

Until here works as expected until some point.

But what is the CSS extra code required to:

  • have the Labels located in the left (right now is centered).
  • have the Legend located in the left (right now is centered).
ATP
  • 2,025
  • 2
  • 9
  • 24
Manuel Jordan
  • 13,649
  • 17
  • 81
  • 128

1 Answers1

2

The easiest solution for your scenario:

body {
    text-align: center;
}

form {
    display: inline-block;
    text-align: left;
}
Ionut
  • 2,658
  • 4
  • 28
  • 46