输入与图像 SCSS 不对齐

Question

我有一个问题。我想输入一个与图片相同的输入，与图片相提并论，但我明白了：

我部分理解这是为什么，图片位于一个 div 中，输入对齐，但我不知道如何更改它的高度。 我的标记如下所示：

<div className={main.wrapper}>
   <div className={main.container}>

      <div className={main.image}>
         <img src={require("./components/UI/img/img.png")}/>
      </div>

      <div className={main.input}>
         <input/>
      </div>
  </div>
</div>

我的风格是这样的：

.wrapper{
    margin: 0;

}
.container{
    justify-content: center;
    align-items: center;
    text-align: center;

    h1{
        font-family: "Roboto Light";
    }

}

.image{

    display: inline;

    img{
        height: 56px;
        display: inline;
        margin: 10px 0;
        width: 141px;
        pointer-events: none; /*элемент не может стать объектом мыши*/
        user-select: none; /*запрет на перенос текста*/
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

}


.input{
    padding: 10px 100px;

    display: inline;
    input{
        height: 60px;
    }

}

请帮帮我

Answer 1

只需将

display: flex;

添加到

.container

.
作为替代方案，您也可以使用

inline-flex

（取决于您的使用情况）。

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    h1{
        font-family: "Roboto Light";
    }

}

作为替代方案（取决于您的使用情况），您还可以使用

inline-flex

.