CSS 在 ap:datatable 中对齐 h:outputText
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21180982/
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
Aligning h:outputText inside a p:datatable
提问by techy360
I have an <h:outputText value="#{xx.nameame}" />which is given below
我有一个<h:outputText value="#{xx.nameame}" />下面给出的
<p:dataTable>
<p:column width="200" >
<f:facet name="header" >
<h:outputText value="Header1" />
</f:facet>
<h:panelGroup rendered="#{xx.addFlag == false}">
<h:outputText value="#{xx.nameame}" />
</h:panelGroup>
</p:column>
</p:dataTable>
I want to align the values coming for this field <h:outputText value="#{xx.nameame}" />in left side of the cell example : text-align:left
我想<h:outputText value="#{xx.nameame}" />在单元格示例的左侧对齐此字段的值：text-align:left
But the problem is that JSF itself, considering the column as div tag, is assigning the the css by default which is:
但问题是 JSF 本身，将列视为 div 标签，默认情况下分配的 css 是：
.ui-dt-c {
white-space: normal;
text-align: center;
}
Due to the above, the text is aligned center. If I change the above to text-align: to left, all the datatable will get changed in other screens too.
Hence I want to apply the change only to the above datatable and not for the others.
由于上述原因，文本居中对齐。如果我将上述更改为text-align: to left，则所有数据表也将在其他屏幕中更改。
因此，我只想将更改应用于上述数据表，而不是其他数据表。
How can I achieve it?
我怎样才能实现它？
回答by Qadir Hussain
For older PrimeFaces versions (pre 5.2), use this code to make it left align as.
对于较旧的 PrimeFaces 版本（5.2 之前的版本），请使用此代码使其左对齐为。
<div align="left"><h:outputText value="#{xx.nameame}" /></div>
For newer PrimeFaces versions, see the answer belowwhere you can just put the style on the column
对于较新的 PrimeFaces 版本，请参阅下面的答案，您可以将样式放在列上
回答by milkersarac
You can also use styleproperty with floatoption like;
您还可以将style属性与float选项一起使用；
<h:outputLabel value="Max" style="float:left" />
回答by mismanc
In modern PrimeFaces versions (> 5.1) the div around the content is not rendered anymore, so the problem was solved in a different way (Because when you use Qadir Hussain answer, if the web page is in mobile view column value is shown below of the column name(expected at the opposite of the column name)).
在现代 PrimeFaces 版本（> 5.1）中，内容周围的 div 不再呈现，因此问题以不同的方式解决（因为当您使用 Qadir Hussain 回答时，如果网页在移动视图中，列值如下所示列名（应与列名相反））。
The div around the content of the column 'content' is not present anymore in recent PrimeFaces versions so the following 'just works'
在最近的 PrimeFaces 版本中不再存在围绕“内容”列内容的 div，因此以下“仅适用”
<p:column style="text-align: left" class="TexLeft">
......
....
</p:column>
So you can give a style or a class or both to element, that will solves your responsive or more complicated issues.
因此，您可以为元素提供样式或类或两者兼而有之，这将解决您的响应式或更复杂的问题。
