CSS: выравнивание HTML по центру формы, но метки и легенда выровнены по левому краю

Для HTML-кода (здесь на основе 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>

Я нашел этот пост:

Как центрировать эту форму в css?

Так используется:

body {
    text-align: center;
}

form {
    display: inline-block;
}

Здесь цель - иметь форму в центре страницы:

Результат:

Пока здесь работает как положено до какого-то момента.

Но какой дополнительный код CSS требуется для:

иметь ярлыки, расположенные слева (сейчас по центру).
расположите легенду слева (сейчас по центру).

css

23.12.2020 18:02

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

570

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Самое простое решение для вашего сценария:

body {
    text-align: center;
}

form {
    display: inline-block;
    text-align: left;
}

23.12.2020 18:06

Другие вопросы по теме

Как скрыть все, кроме div и всех его дочерних элементов?

Я хочу выровнять изображения из разных div в моей аккордеонной карте Bootstrap 4 друг над другом

Как остановить нежелательное движение ссылки при наведении курсора с помощью «Flex» в качестве отображения?

Могу ли я создать отдельный файл HTML для таких устройств, как мобильные устройства и вкладки для моего веб-сайта?

Почему мой скрипт не создает новые элементы в контейнере?

Как разделить бутстрап 4 карты

Показать больше текста после поля <p></p>

Псевдокласс только для чтения применяется к переключателю, не будучи доступным только для чтения в Firefox

Управление позициями div

Перезаписать угловой материал css - Почему !important работает

CSS: выравнивание HTML по центру формы, но метки и легенда выровнены по левому краю

Ответы 1

Другие вопросы по теме

Похожие вопросы