CSS PrimeNG - p 面板的样式大小和对齐方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44148075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeNG - styling size and alignment of p-panel
提问by skinny_jones
I am creating a login page using a PrimeNG p-panel component: https://www.primefaces.org/primeng/#/panel
我正在使用 PrimeNG p-panel 组件创建登录页面：https://www.primefaces.org/primeng/#/panel
The panel takes the whole row of the screen, but I would like to make the whole panel be about 30% wide and centralized so I don't get a lot of empty space in my panel as I have only these two fields and a button.
面板占据屏幕的整行，但我想让整个面板大约 30% 宽并集中，所以我的面板中没有很多空白空间，因为我只有这两个字段和一个按钮.
I have the following page:
我有以下页面：
login.componennt.html
登录.component.html
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="text" pInputText placeholder="user" [(ngModel)]="user"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="password" pPassword placeholder="password" [(ngModel)]="password"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<button pButton type="button" label="Login" (click)="doLogin()"></button>
</div>
</div>
</p-panel>
So I tried this:
所以我试过这个：
<p-panel header="Login" styleClass="center-div">
...
login.component.css
登录名.component.css
.center-div {
width: 30%;
margin: 0 auto;
}
Which doesn't work.
哪个不起作用。
I have the screen like this:
我有这样的屏幕：
So I've inspected the code, Chrome Dev Tools, and I got:
所以我检查了代码，Chrome Dev Tools，我得到了：
<p-panel _ngcontent-c1="" header="Login" styleclass="center-div" ng-reflect-header="Login" ng-reflect-style-class="center-div">
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
<div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Login</span>
</div>
<div class="ui-panel-content-wrapper" ng-reflect-klass="ui-panel-content-wrapper" ng-reflect-ng-class="[object Object]">
<div class="ui-panel-content ui-widget-content">
<div _ngcontent-c1="" class="ui-g">
<div _ngcontent-c1="" class="ui-lg-2 ui-md-2 ui-sm-2">
<input _ngcontent-c1="" pinputtext="" placeholder="user" type="text" class="ng-untouched ng-pristine ng-valid ui-inputtext ui-corner-all ui-state-default ui-widget">
</div>
</div> ...
So I can see my css class 'center-div'in the right place, just before the actual panel content, but why it doesn't affect the content style? here:
所以我可以在正确的位置看到我的 css 类“center-div”，就在实际面板内容之前，但为什么它不影响内容样式？这里：
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
So in Chrome Dev Tools if I change the ui-panelclass to
所以在 Chrome Dev Tools 中，如果我将ui-panel类更改为
width: 30%;
margin: 0 auto;
It does work, then I get the page I want:
它确实有效，然后我得到了我想要的页面：
So one question is, why my center-divclass doesn't affect the content but ui-paneldoes?
所以一个问题是，为什么我的center-div类不影响内容，但ui-panel会影响？
Should I then css select ui-paneland do changes there? I've been trying to, but I have been failed.
我应该然后 css 选择ui-panel并在那里进行更改吗？我一直在努力，但我失败了。
Any help?
有什么帮助吗？
Cheers!
干杯!
采纳答案by skinny_jones
I quit the idea of trying to affect the PrimeNG css classes, so I added the panel in a div container, so I can affect the behavior of that container, which works much better.
我放弃了试图影响 PrimeNG css 类的想法，所以我在 div 容器中添加了面板，这样我就可以影响该容器的行为，这样效果会更好。
So I created a center-loginclass and I also used media query to work on the width and margins, to make it responsive... here's what I've done:
所以我创建了一个中心登录类，我还使用媒体查询来处理宽度和边距，使其具有响应性......这是我所做的：
login.component.html
登录.component.html
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12 center-login">
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12">
<h4 class="first in-label">User</h4>
<input type="text" pInputText [(ngModel)]="user"/>
</div>
</div>
...
login.component.css
登录名.component.css
@media screen and (min-width: 600px) {
.center-login {
width: 600px;
margin: 0 auto;
}
}
So when my screen is 600px wide or less I just let it take the space, but when the screen gets bigger I centralize it and fix the width at 600px.
因此，当我的屏幕宽度为 600px 或更小时，我只是让它占据空间，但是当屏幕变大时，我将其居中并将宽度固定为 600px。
回答by Adam Malec
You should use next selector in CSS
你应该在 CSS 中使用 next 选择器
.center-div.ui-panel{
width: 30%;
margin: 0 auto;
}
