我正在尝试将 span 标记
中的文本与 输入字段
的中心对齐。但是当我在我的 css 中使用 "text-align": center
时,它不起作用。
当我将span 标签
更改为paragraph 标签
时,我的输入字段
变大了。
代码:
<div class="nxui-form-group">
<label for="external-realisation">
<img src="assets/images/purchase_order.svg" class="nxui-icon-small nxui-icon-align-bottom">
{{ 'i18n.all-damage-reports.label.external-realisation' | translate }}
</label>
<div *ngIf="!isExternal">
{{ 'i18n.all-damage-reports.label.without-order' | translate }}
</div>
<div *ngIf="isExternal" class="nxui-label-plus-field">
<span class="nxui-non-breakable-label">{{ 'i18n.all-damage-reports.label.with-order' | translate }} </span>
<input [nxuiPlaceholder]="'i18n.all-damage-reports.label.external-realisation' | translate"
[title]="'i18n.all-damage-reports.label.external-realisation' | translate"
class="nxui-form-control"
formControlName="company"
id="external-realisation"
pInputText
>
</div>
</div>
回答我的问题:
.nxui-label-plus-field {
display: flex;
align-items: center;
}
.nxui-non-breakable-label {
white-space:nowrap ;
}
非常感谢您的投入。
谢谢
最佳答案
HTML:
<div *ngIf="isExternal" class="nxui-label-plus-field">
<span class="nxui-non-breakable-label">{{ 'i18n.all-damage-reports.label.with-order' | translate }} </span>
<input [nxuiPlaceholder]="'i18n.all-damage-reports.label.external-realisation' | translate"
[title]="'i18n.all-damage-reports.label.external-realisation' | translate"
class="nxui-form-control"
formControlName="company"
id="external-realisation"
pInputText
>
</div>
CSS:
<style>
.nxui-label-plus-field {
display: flex;
align-items: center;
}
</style>
关于html - 如何将文本对齐到输入字段的中间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54786770/