时间戳

首页 > 解决方案 > 如何将文本与输入字段的中间对齐？

html - 如何将文本与输入字段的中间对齐？

问题描述

我正在尝试将我的文本对齐span tag到input field. 但是当我"text-align": center在我的css中使用它时，它不起作用。

当我把它改成span tag我paragraph tag变input field大的时候。

编码：

<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 }}&nbsp;</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>

当我添加以下内容时，它看起来像这样paragraph tag： 在此处输入图像描述

与span tag： 在此处输入图像描述

回答我的问题：

.nxui-label-plus-field {
  display: flex;
  align-items: center;
}

.nxui-non-breakable-label {
  white-space:nowrap ;
}

高度赞赏的投入。

谢谢

标签： htmlcssangular

解决方案

HTML：

<div *ngIf="isExternal" class="nxui-label-plus-field">
  <span class="nxui-non-breakable-label">{{ 'i18n.all-damage-reports.label.with-order' | translate }}&nbsp;</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>

推荐阅读