如何将垫子按钮与垫子输入对齐？

Question

如何使这两个项目正确对齐？我试图使它们完全对齐，但是调整按钮的高度只会使底部距离搜索输入的底部越来越远。我认为是因为它们的中心没有对齐，所以调整高度并不是真正的正确解决方案。

这是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>

这是SCSS：

mat-form-field.mat-form-field {
    font-size: 12px;
    width: 300px;
  }

  button.mat-stroked-button {
    font-size: 14px;
    height: 42px;
    margin: 10px;
  }

Answer 1

要实现水平对齐，您需要对标记进行一些调整，并使用flex属性实现完美对齐。我添加了一些div作为父类，但是如果您愿意，可以将CSS分配给代码的实际父类。我在下面添加了我的代码段代码，并相应地更新了HTML和CSS：

getInitialProps

add_action( 'wp_enqueue_scripts', 'tt_child_enqueue_parent_styles' );

function tt_child_enqueue_parent_styles() {
   wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri().'/style.css' );
   wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/style.css', array('twentytwenty-style') );
}