Я знаю, что есть много вопросов по этой проблеме, но ничего не работало для меня правильно.
Мне нужно выровнять PanelGrid в центре (по горизонтали).
это моя панель.
<p:panelGrid styleClass="panelGridCenter">
и мой CSS:
.panelGridCenter td,.panelGridCenter tr {
text-align: center;
}
Он просто выравнивает содержимое до центра, но не панельGrid
Компонент JSF <p:panelGrid> отображает элемент HTML <table>, который по умолчанию представляет собой элемент уровня блока . Чтобы центрировать элемент уровня блока, вы должны установить его горизонтальный запас на auto вместо того, чтобы пытаться центрировать его встроенное содержимое.
.panelGridCenter {
margin: 0 auto;
}
Вышеуказанный ответ технически правильный, но также неполный.
Если вы хотите центрировать что-то вроде div, вышеупомянутая техника игры с левым и правым краем как авто будет работать, при условии, что ваш DIV имеет ограниченную ширину. Например. Чтобы вы начали действовать, вам нужно было бы поместить что-то вроде ширины = 60%.
И затем, как только вы поймете, что вам нужно играть с фиксированной шириной... вам сразу же будет предложено ответить на следующий вопрос: Итак, что именно я должен вводить в качестве фиксированной ширины?
Вот почему я считаю, что лучший ответ на этот вопрос: Методы CSS, подобные приведенным выше, подходят для небольших деталей на веб-странице. Но ваш грубоватый подход для центрирования всего на веб-странице должен состоять в использовании сетчатой системы. Большинство систем сетки используют 12 ячеек. Если, например, ваша сетка будет по умолчанию составлять 12 ячеек = 100% ширины. Вы могли бы центрировать что-то, например, помещая ваш контент в центр в ячейках [5-8], оставляя в качестве космических клеток центриона [1-4] и клеток [9-12].
Ниже приведен пример, основанный на сетке с первичными гранями:
<h3 id="signInTitle" class="first">Sign in - FIXME - i18n</h3>
<form id="loginFormOld" (ngSubmit)="onLoginFormSubmit()">
<!-- (a) Start a grid system-->
<div class="ui-g ui-fluid">
<!-- (b) Eat the first four cells of the grid -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (c) In the center location of the grid put in the Login form -->
<div class="ui-g-12 ui-md-4">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input id="emailInput" pInputText type="email" placeholder="Email" [(ngModel)]="eMail" name="eMail">
</div>
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon"><i class="fa fa-key" aria-hidden="true"></i></span>
<input id="passwordInput" pInputText type="password" class="form-control" placeholder="Password" [(ngModel)]="password" name="password">
</div>
</div>
<!-- (d) Eat the rest of the first row of the grid without setting any contents -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (e) Start the second row and eat the first four cells -->
<div class="ui-g-12 ui-md-4"></div>
<!-- (f) Position a form submit button on the fifth cell -->
<div class="ui-g-12 ui-md-1">
<button id="loginSubmit" pButton type="submit" label="Submit"></button>
</div>
</div>
</form>
Комментарии к приведенной выше форме должны сделать ее довольно ясной, что я имел в виду выше. Система grid обычно предлагает классы CSS, позволяющие вашему пользовательскому интерфейсу работать с несколькими формфакторами устройств, хотя... в этом отношении я придерживаюсь мнения, что вы не можете создать хороший мобильный пользовательский интерфейс с использованием пользовательского интерфейса рабочего стола или хорошего рабочего интерфейса пользователя с использованием мобильного интерфейса. По моему мнению, вы можете получить хороший планшетный/настольный пользовательский интерфейс, но вы должны писать страницы с нуля с минимальным необходимым содержимым для мобильных устройств. Но это другая дискуссия... просто сказать, что классы flex grid css будут принимать вас до сих пор. Много теоретического потенциала, гораздо лучше, чем жесткое кодирование некоторой произвольной фиксированной длины на ваших элементах div... но не серебряная пуля для всех ваших проблем.