измененный элемент ввода не будет центрироваться - PullRequest
Новая
       7

измененный элемент ввода не будет центрироваться

0 голосов
/ 05 июня 2018

Я использую primeNG, и я сделал с ним группу ввода.Это поле ввода следует переместить в центр, и я знаю, что для этого я должен использовать text-align: center в контейнере для конвертации.Однако, когда я делаю это, группа ввода по-прежнему не двигается вправо, я действительно не знаю, что вызывает это.Это мой код:

css 

.middle {
    text-align: center;
}

html 

    <div class="middle ui-inputgroup">
      <input type="text" size="5" pInputText placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>

ui-inputgroup является собственным классом primeNG, больше информации здесь: https://www.primefaces.org/primeng/#/inputgroup

Кто-нибудь может сказать, что происходит?

РЕДАКТИРОВАТЬ: Ваш код заставляет кнопку под входом плавать рядом с входом вместо центрирования кнопки.Это ваш реализованный код плюс html-код кнопки: 

  <div class="ui-g-12 ui-md-4 test">
    <div class="middle ui-inputgroup">
      <input type="text" size="5" pInputText placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>
  </div>


<button mat-raised-button id="newFilter" (click)="showDialog()">Add new filter</button>
</div>

это выглядит так:

enter image description here

1 Ответ

0 голосов
/ 05 июня 2018

выравнивание текста по центру уже по центру, 

<div class="ui-g-12 ui-md-4 test">
    <div class="ui-inputgroup">
        <span class="ui-inputgroup-addon">
           <i class="fa fa-user"></i>
        </span>
        <input pinputtext="" placeholder="Username" 
    type="text" class="ui-inputtext ui-corner-all ui-state-default ui-widget">
    </div>
</div>

стиль: 

.ui-g-12.ui-md-4.test {
    margin: 0 auto;
}

input.ui-inputtext.ui-corner-all.ui-state-default.ui-widget {
    text-align: center;
}

обновление : 

<div class="ui-g-12 ui-md-6 test" style="margin: 0 auto;">
    <div class="middle ui-inputgroup" style="display: inline-flex;">
      <input type="text" size="5" pinputtext="" placeholder="Value">   
      <span class="ui-inputgroup-addon"><code>cm</code></span>      
    </div>
    <button id="newFilter">Add new filter</button>
</div>
...