Question

我正在学习Angular，并且我已经尝试过几次在线建议，以求如何在不成功的情况下使输入元素居中。有人可以帮忙吗？

这是我学习Angular的方法。我正在使用Angular7。我尝试使用Flexbox CSS和普通CSS，但是Input始终显示在页面的左上角。

input {
 text-align: center;
 border: 3px solid green;
 }

 #textboxid
{
   height:40px;
   width: 400px;
   font-size:20pt;
}

<input
   (keyup)="searchTerm$.next($event.target.value)"  id=textboxid  class="container" >

   <ul *ngIf="results">
     <li *ngFor="let result of results | slice:0:9">
       <a href="{{ result.latest }}" target="_blank">
         {{ result.name }}
       </a>
     </li>
   </ul>

stackblizdemo：https://angular-wv4nt9.stackblitz.io

Answer 1

这是根据您给定代码的stackblitz。

基本上要使用flexbox，您需要一个i容器并将flex设置为justify-content

center

这是一个有趣的flexbox教程，可以学习https://flexboxfroggy.com/

Answer 2

您需要将UIImage包装到input中。

div

和CSS

<div class="search-box">
<input
   (keyup)="searchTerm$.next($event.target.value)"  id=textboxid  class="container" >
</div>

Live Demo

如何在Angular中将输入元素居中？

2 个答案: