0
1.8K
Vistas¿Cómo alinear mat-button con mat-input?
¿Cómo puedo hacer que estos dos elementos se alineen correctamente? Estoy tratando de alinearlos perfectamente, pero ajustar la altura del botón solo hace que la parte inferior se aleje más de la parte inferior de la entrada de búsqueda. Creo que es porque el centro de ellos no está alineado, por lo que ajustar la altura no es realmente la solución correcta. 
Aquí está el HTML
<!-- Search Box and Button--> <p>Search by company name:</p> <mat-form-field appearance="outline"> <mat-label>Search</mat-label> <input matInput placeholder="Search"> </mat-form-field> <button mat-stroked-button color="primary">Search</button>Aquí está el SCSS:
mat-form-field.mat-form-field { font-size: 12px; width: 300px; } button.mat-stroked-button { font-size: 14px; height: 42px; margin: 10px; }
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Para lograr la alineación horizontal, debe realizar algunos ajustes en el marcado y usar las propiedades de flexión para una alineación perfecta. He agregado algunos div como padre, pero si lo desea, puede asignar CSS a las clases principales reales de su código. Agregué mi código de fragmento a continuación, actualice HTML y CSS en consecuencia:
.searchcontainer { text-align:center; width: 100%; max-width: 600px; margin: 0 auto; } .searchcontainer .search-part { display: flex; flex-direction: row; justify-content: center; align-items: center; } mat-form-field.mat-form-field { font-size: 12px; width: 300px; } button.mat-stroked-button { font-size: 14px; height: 42px; margin: 10px; } <div class="searchcontainer"> <p>Search by company name:</p> <div class="search-part"> <mat-form-field appearance="outline"> <mat-label>Search</mat-label> <input matInput placeholder="Search"> </mat-form-field> <button mat-stroked-button color="primary">Search</button> </div> </div>
·
Santiago Trujillo
Denunciar
Responde la pregunta