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,939
  • 4
  • 13
  • 34
Manuel Jordan
  • 15,253
  • 21
  • 95
  • 158

1 Answers1

2

The easiest solution for your scenario:

body {
    text-align: center;
}

form {
    display: inline-block;
    text-align: left;
}
Ionut
  • 2,788
  • 6
  • 29
  • 46